/* Shared Create: the approved Study / learning path / topic carousel. */
html[data-custom-topic] #createOptionsRoot { display:none !important; }
html[data-mweb][data-mpage="gen"][data-custom-topic] body > nav { display:flex !important; position:relative !important; }
html[data-custom-topic] body { background:#111116 !important; }
html[data-custom-topic] body::after { content:none; }
.mch-root { --app:#111116; --text:#f3efe9; --muted:#99929f; --amber:#ffab00; --amber-bright:#ffc05b; --hair-strong:#403b46; --safe-bottom:env(safe-area-inset-bottom,0px); --ease:cubic-bezier(.22,.8,.3,1); position:relative; display:flex; flex-direction:column; height:calc(100dvh - var(--mch-chrome-height,62px)); min-height:530px; width:100%; overflow:hidden; color:var(--text); background:var(--app); font-family:Nunito,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
.mch-root *, .mch-root *::before, .mch-root *::after { box-sizing:border-box; }
.mch-root button,.mch-root input,.mch-root textarea { font:inherit; }
.mch-root button { -webkit-tap-highlight-color:transparent; }
.mch-root [hidden] { display:none !important; }
.mch-root .creator { display:flex; flex:1; flex-direction:column; align-items:center; min-height:0; overflow-y:auto; width:100%; padding:28px 18px 12px; scrollbar-width:none; }
.mch-root .mch-hero-scroll { display:contents; }
.mch-root .empty-state-copy { flex:0 0 106px; height:106px; margin:0 0 32px; }
.mch-root .empty-state-title { font-size:28px; }
.mch-root .art-viewport { flex:0 0 clamp(235px,34dvh,330px); height:clamp(235px,34dvh,330px); }
.mch-root[data-art-paused="true"] .art-viewport * { animation-play-state:paused !important; }
.mch-root .study-ara { width:min(326px,118%); height:min(300px,100%); overflow:visible; }
.mch-root .empty-state-actions { margin-top:auto; margin-bottom:8px; padding-top:18px; height:80px; flex:0 0 80px; }
.mch-root .mode-empty-action { top:18px; width:min(340px,calc(100% - 12px)); }
.mch-root .empty-state-actions.has-library { width:min(520px,100%); }
.mch-root .empty-state-actions.has-library .mode-empty-action { left:0; width:calc(50% - 6px); transform:translateY(6px); }
.mch-root .empty-state-actions.has-library .mode-empty-action.active { transform:translateY(0); }
.mch-root .empty-state-actions.has-library .mode-empty-action.active:active { transform:translateY(3px); }
.mch-root .mch-open-library { position:absolute; top:18px; right:0; width:calc(50% - 6px); min-height:54px; display:flex; align-items:center; justify-content:center; padding:8px 10px; border:1px solid var(--hair-strong); border-radius:15px; background:color-mix(in srgb,var(--muted) 10%,var(--app)); box-shadow:0 4px 0 color-mix(in srgb,var(--hair-strong) 65%,var(--app)); color:var(--text); font-size:15px; line-height:1.2; font-weight:800; cursor:pointer; }
.mch-root .mch-open-library:hover { border-color:var(--amber-bright); }
.mch-root .mch-open-library:active { transform:translateY(2px); box-shadow:0 2px 0 var(--hair-strong); }
.mch-root :is(.mch-open-library,#mchSavedClose):focus-visible { outline:2px solid var(--amber-bright); outline-offset:3px; }
.mch-root .mode-dots { padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); flex:0 0 44px; }
.mch-root .study-courses,.mch-root .learning-paths { display:none; width:100%; max-width:400px; margin:22px 0; flex-shrink:0; }
.mch-root .study-sheet-scrim { position:fixed; inset:0; display:flex; align-items:flex-end; background:rgba(6,6,9,.72); z-index:900; }
.mch-root .study-sheet { max-height:90dvh; padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); }
.mch-root .study-paste textarea,.mch-root .path-goal-form textarea { font-size:16px; }
.mch-root .mch-topic-form { position:static; display:flex; flex-direction:column; gap:18px; width:100%; min-height:180px; margin:0; padding:0; visibility:visible; opacity:1; transform:none; pointer-events:auto; }
.mch-root .mch-goal-field { display:block; margin:0; padding:0; border:0; background:none; box-shadow:none; }
.mch-root .co-path-prompt,.mch-root .co-setup-close { display:none; }
.mch-root .co-path-submit { position:static; display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.mch-root .co-path-submit svg { display:none; }
.mch-root .mch-topic-search { position:relative; display:flex; align-items:center; gap:10px; min-height:58px; width:100%; padding:8px 8px 8px 15px; border:1px solid #49434e; border-radius:16px; background:#211e26; }
.mch-root .co-search-icon { display:none; }
.mch-root #topicInput { flex:1; min-width:0; width:100%; margin:0; padding:5px 0; border:0; outline:0; color:var(--text); background:none; font-size:16px; }
.mch-root #genBtn { position:static; min-width:90px; min-height:42px; padding:8px 12px; margin:0; border:0; border-radius:12px; background:#ffab00; color:#261800; font-size:13px; font-weight:800; }
.mch-root .co-topic-controls { margin-top:auto; }
.mch-root .lh-step-dd { position:absolute; bottom:calc(100% + 8px); }
.mch-root .mch-list-status { width:100%; text-align:center; color:var(--muted); font-size:13px; }
.mch-root .mch-busy { display:none; align-items:center; justify-content:center; min-height:90px; gap:10px; color:var(--amber-bright); }
.mch-root[data-busy="true"] .mch-busy { display:flex; }
.mch-root[data-busy="true"] #studyUploadChoice,.mch-root[data-busy="true"] #studyPasteChoice,.mch-root[data-busy="true"] #studyPaste,.mch-root[data-busy="true"] #studySheetClose { display:none; }
.mch-root .mch-busy i { width:24px; height:24px; border:3px solid #594024; border-top-color:#ffab00; border-radius:50%; animation:mch-spin .7s linear infinite; }
@keyframes mch-spin { to { transform:rotate(360deg); } }
html[data-theme="light"][data-custom-topic] body { background:#fff !important; }
html[data-theme="light"] .mch-root { --app:#fff; --text:#252129; --muted:#777079; --hair-strong:#d8d0c7; --amber-bright:#b36b00; }
html[data-theme="light"] .mch-root .study-sheet { background:#fffdfa; border-color:#d8d0c7; }
html[data-theme="light"] .mch-root .study-sheet h2 { color:#252129; }
html[data-theme="light"] .mch-root .study-sheet-choice,html[data-theme="light"] .mch-root .study-course-card { background:#fffdfa; border-color:#d8d0c7; box-shadow:0 3px 0 #e1dbd3; }
html[data-theme="light"] .mch-root .study-sheet-heading p,html[data-theme="light"] .mch-root .study-sheet-choice small,html[data-theme="light"] .mch-root .study-sheet-close { color:#777079; }
html[data-theme="light"] .mch-root .study-paste textarea,html[data-theme="light"] .mch-root .path-goal-form textarea,html[data-theme="light"] .mch-root .mch-topic-search { background:#f5f2eb; border-color:#d8d0c7; color:#252129; }
html[data-theme="light"] .mch-root .swipe-arrow { background:#f4f1ed; color:#777079; border-color:#ded8d0; }
@media (max-height:740px) {
 .mch-root .creator { padding-top:12px; }
 .mch-root .empty-state-copy { flex-basis:92px; height:92px; margin-bottom:20px; }
 .mch-root .empty-state-title { font-size:25px; }
 .mch-root .empty-state-description { font-size:13px; }
 .mch-root .art-viewport { flex-basis:225px; height:225px; }
}

.mch-root #genBtn { position:relative; width:46px !important; min-width:46px !important; max-width:46px !important; flex:0 0 46px; height:44px !important; color:transparent !important; font-size:0 !important; background:#ffab00 !important; box-shadow:0 3px 0 #ad6900 !important; }
.mch-root #genBtn::after { content:'➜'; position:absolute; inset:0; display:grid; place-items:center; color:#261800; font-size:23px; }
.mch-root .mch-goal-field textarea { min-height:110px; }
.mch-root .mch-path-submit svg { display:none; }
html[data-theme="light"] .mch-root :is(.study-ara,.path-ara-scene,.topic-ara-scene) { filter:drop-shadow(0 10px 12px rgba(55,38,17,.12)); }

.mch-root #topicInput { box-shadow:none !important; border-radius:0 !important; background:transparent !important; text-align:left !important; padding:5px 0 !important; }
.mch-root #genBtn { min-height:44px !important; border-radius:12px !important; }

.mch-root .study-sheet-scrim { top:var(--mch-visible-top,0px); bottom:auto; height:var(--mch-visible-height,100dvh); }
.mch-root .study-sheet { max-height:90%; }

/* Saved content opens in its own library, keeping the carousel focused on Ara. */
.mch-root .mch-saved-library { position:fixed; inset:0; margin:auto; width:min(940px,calc(100vw - 32px)); height:min(720px,calc(100dvh - 48px)); max-width:none; max-height:none; padding:0; overflow:hidden; border:1px solid var(--hair-strong); border-radius:24px; background:var(--app); color:var(--text); font-family:inherit; box-shadow:0 24px 90px rgba(0,0,0,.35); }
.mch-root .mch-saved-library[open] { display:flex; flex-direction:column; }
.mch-saved-library::backdrop { background:rgba(5,5,9,.65); backdrop-filter:blur(5px); }
.mch-root .mch-saved-header { display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; border-bottom:1px solid var(--hair-strong); }
.mch-root .mch-saved-header h2 { margin:0; font-size:26px; line-height:1.2; font-weight:800; }
.mch-root #mchSavedClose { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:1px solid var(--hair-strong); border-radius:13px; background:transparent; color:var(--muted); cursor:pointer; }
.mch-root #mchSavedClose:hover { color:var(--text); background:color-mix(in srgb,var(--muted) 12%,transparent); }
.mch-root .mch-saved-content { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:24px 24px 30px; }
.mch-root .mch-saved-library :is(.study-courses,.learning-paths) { display:block; max-width:none; margin:0; }
.mch-root .mch-saved-empty { margin:40px auto; max-width:320px; color:var(--muted); font-size:16px; line-height:1.5; text-align:center; }
html[data-mweb] .mch-root .mch-saved-library { width:calc(100vw - 24px); height:calc(100dvh - 32px); border-radius:22px; }
html[data-mweb] .mch-root .mch-saved-header { padding:16px; }
html[data-mweb] .mch-root .mch-saved-header h2 { font-size:23px; }
html[data-mweb] .mch-root .mch-saved-content { padding:18px 14px 24px; }

/* Saved cards keep their open action separate from the visible options button. */
.mch-root .study-course-card { padding:0; gap:0; cursor:default; }
.mch-root .mch-card-open { display:flex; align-items:center; gap:13px; flex:1; min-width:0; min-height:87px; padding:14px 8px 14px 14px; border:0; border-radius:18px; background:none; color:var(--text); text-align:left; cursor:pointer; }
.mch-root .mch-card-menu { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; margin:0 7px 0 0; padding:0; border:0; border-radius:12px; color:var(--muted); background:transparent; cursor:pointer; }
.mch-root .mch-card-menu:hover { color:var(--text); background:color-mix(in srgb,var(--muted) 14%,transparent); }
.mch-root :is(.mch-card-open,.mch-card-menu):focus-visible { outline:2px solid var(--amber-bright); outline-offset:-3px; }
.mch-root .mch-library-dialog { position:fixed; inset:0; margin:auto; width:min(460px,calc(100vw - 32px)); height:fit-content; max-height:calc(100dvh - 32px); padding:24px; overflow-y:auto; border:1px solid var(--hair-strong); border-radius:22px; color:var(--text); background:var(--app); font-family:inherit; box-shadow:0 22px 80px rgba(0,0,0,.35); }
.mch-library-dialog::backdrop { background:rgba(5,5,9,.65); backdrop-filter:blur(3px); }
.mch-root .mch-library-dialog h2 { margin:0; font-size:23px; line-height:1.2; font-weight:800; }
.mch-root .mch-library-subtitle { margin:10px 0 20px; color:var(--muted); font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.mch-root .mch-library-actions { display:grid; gap:8px; }
.mch-root .mch-library-dialog button { min-height:44px; border:1px solid var(--hair-strong); border-radius:12px; padding:11px 14px; color:var(--text); background:transparent; font-weight:750; cursor:pointer; }
.mch-root .mch-library-dialog button:hover { background:color-mix(in srgb,var(--muted) 12%,transparent); }
.mch-root .mch-library-dialog button:focus-visible { outline:2px solid var(--amber-bright); outline-offset:2px; }
.mch-root .mch-library-dialog button:disabled { opacity:.6; cursor:wait; }
.mch-root .mch-library-actions button { text-align:left; }
.mch-root .mch-library-dialog .mch-library-cancel { width:100%; margin-top:20px; color:var(--muted); }
.mch-root .mch-library-dialog label { display:block; margin-bottom:8px; color:var(--muted); font-size:13px; font-weight:750; }
.mch-root .mch-library-dialog input { width:100%; min-height:48px; padding:11px 13px; border:1px solid var(--hair-strong); border-radius:12px; background:transparent; color:var(--text); font-size:16px; }
.mch-root .mch-library-dialog input:focus { outline:2px solid var(--amber-bright); outline-offset:1px; }
.mch-root .mch-library-icons { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.mch-root .mch-library-icons button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-width:0; padding:9px 3px; border-width:2px; }
.mch-root .mch-library-icons svg { width:48px; height:48px; flex-shrink:0; }
.mch-root .mch-library-icons span { font-size:11px; }
.mch-root .mch-library-icons [aria-pressed="true"] { border-color:var(--amber-bright); background:color-mix(in srgb,var(--amber-bright) 15%,transparent); }
.mch-root .mch-library-error { margin:12px 0 0; color:#ff8b80; font-size:13px; line-height:1.4; }
.mch-root .mch-library-error:empty { display:none; }
.mch-root .mch-library-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.mch-root .mch-library-dialog .mch-library-save { border-color:#ffab00; color:#261800; background:#ffab00; }
.mch-root .mch-library-dialog .is-danger { color:#ff8b80; }
.mch-root .mch-library-dialog .mch-library-save.is-danger { border-color:#b42318; color:#fff; background:#b42318; }
html[data-theme="light"] .mch-root .mch-library-dialog :is(.mch-library-error,.mch-library-actions .is-danger) { color:#b42318; }

/* Desktop keeps the same carousel and artwork, with a wider library and centered dialogs. */
@media (min-width: 769px) {
 html:not([data-mweb]) .mch-root { --mch-art-size:clamp(260px,38dvh,380px); height:calc(100dvh - var(--mch-chrome-height,62px)); min-height:600px; }
 html:not([data-mweb]) .mch-root .creator { padding:28px 40px 18px; }
 html:not([data-mweb]) .mch-root .empty-state-copy { max-width:760px; flex-basis:110px; height:110px; margin-bottom:28px; }
 html:not([data-mweb]) .mch-root .empty-state-title { font-size:38px; letter-spacing:-1px; }
 html:not([data-mweb]) .mch-root .empty-state-description { max-width:600px; font-size:17px; line-height:1.5; }
 html:not([data-mweb]) .mch-root .art-viewport { max-width:760px; flex-basis:var(--mch-art-size); height:var(--mch-art-size); margin-block:auto; }
 html:not([data-mweb]) .mch-root :is(.study-ara,.path-ara-scene,.topic-ara-scene) { width:var(--mch-art-size); height:var(--mch-art-size); }
 html:not([data-mweb]) .mch-root .swipe-arrow { width:46px; height:46px; }
 html:not([data-mweb]) .mch-root .swipe-arrow svg { width:21px; height:21px; }
 html:not([data-mweb]) .mch-root .mode-empty-action { width:360px; min-height:56px; font-size:18px; }
 html:not([data-mweb]) .mch-root .empty-state-actions { margin-top:0; }
 html:not([data-mweb]) .mch-root .mode-dots { flex-basis:46px; padding-bottom:14px; }
 html:not([data-mweb]) .mch-root .mch-open-library { min-height:56px; font-size:17px; }
 html:not([data-mweb]) .mch-root .study-course-list { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 html:not([data-mweb]) .mch-root .study-course-card { min-height:94px; }
 html:not([data-mweb]) .mch-root .study-sheet-scrim { align-items:center; justify-content:center; padding:24px; }
 html:not([data-mweb]) .mch-root .study-sheet { width:560px; max-height:100%; padding:28px 32px 20px; border-bottom:1px solid var(--hair-strong); border-radius:28px; }
 html:not([data-mweb]) .mch-root .study-sheet-grab { display:none; }
 html:not([data-mweb]) .mch-root .study-sheet h2 { font-size:28px; }
 html:not([data-mweb]) .mch-root .study-sheet .study-sheet-heading p { max-width:390px; font-size:15px; }
 html:not([data-mweb]) .mch-root .study-sheet-choice { min-height:88px; }
}
@media (min-width:769px) and (max-height:800px) {
 html:not([data-mweb]) .mch-root { --mch-art-size:260px; }
 html:not([data-mweb]) .mch-root .creator { padding-top:14px; }
 html:not([data-mweb]) .mch-root .empty-state-copy { flex-basis:92px; height:92px; margin-bottom:20px; }
 html:not([data-mweb]) .mch-root .empty-state-title { font-size:34px; }
 html:not([data-mweb]) .mch-root .art-viewport { flex-basis:260px; height:260px; }
}

/* Home's stable viewport budget keeps the actions above browser controls. Only
   the heading/artwork scroll on short phones; the action row and dots never do. */
html[data-mweb] .mch-root {
 height:max(0px,calc(min(100svh,var(--mch-visible-height,100svh)) - var(--mch-viewport-top,var(--mch-chrome-height,62px)) - var(--safe-bottom)));
 min-height:0;
}
html[data-mweb] .mch-root .creator { overflow:hidden; padding:0 18px; }
html[data-mweb] .mch-root .mch-hero-scroll { position:relative; display:flex; flex:1 1 0; flex-direction:column; align-items:center; width:100%; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; padding:28px 0 12px; }
html[data-mweb] .mch-root .empty-state-copy { flex:0 0 auto; width:100%; height:auto; min-height:106px; margin-bottom:24px; }
html[data-mweb] .mch-root .art-viewport { flex:1 0 128px; height:auto; min-height:128px; max-height:330px; margin-block:auto; }
html[data-mweb] .mch-root .art-track { position:absolute; inset:0; }
html[data-mweb] .mch-root .art-card { min-height:0; grid-template-rows:minmax(0,1fr); }
html[data-mweb] .mch-root :is(.study-ara,.path-ara-scene,.topic-ara-scene) { min-height:0; max-height:100%; }
html[data-mweb] .mch-root .empty-state-actions { flex:0 0 80px; margin:0 0 8px; }
html[data-mweb] .mch-root .mode-dots { flex:0 0 38px; padding-bottom:10px; margin-bottom:5px; }
html[data-mweb] .mch-root .mch-list-status { flex-shrink:0; margin:10px 0 0; }
html[data-mweb] .mch-root .mch-list-status:empty { display:none; }
@media (max-height:740px) {
 html[data-mweb] .mch-root .mch-hero-scroll { padding-top:12px; }
 html[data-mweb] .mch-root .empty-state-copy { min-height:92px; margin-bottom:16px; }
}
