/* Penpot: Home / Settings palette and Settings / bottom sheet.
   Home controls still share Reader's material and expanded geometry in reader.css. */
html:has(:is(#v-home,#v-casuals,#v-longform).on),body:has(:is(#v-home,#v-casuals,#v-longform).on){background:var(--home-background);}
body:has(:is(#v-home,#v-casuals,#v-longform).on)::before{display:none;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #topbar{position:relative;transform:none;opacity:1;visibility:visible;pointer-events:auto;transition:none;background:transparent;backdrop-filter:none;border:0;gap:10px;padding:calc(env(safe-area-inset-top) + 24px) 20px 12px;}
.home-brand-icon{display:none;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #logo{gap:10px;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) .home-brand-icon{display:block;border-radius:9px;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #logo .mark{font:700 32px/44px var(--ui);letter-spacing:-.8px;color:var(--settings-ink);}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #nav-settings{margin-left:auto;flex:none;width:44px;height:44px;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #nav-settings svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #nav-settings span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #v-home{padding-top:20px;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #toast,body:has(:is(#v-home,#v-casuals,#v-longform).on) #minitoast{bottom:calc(env(safe-area-inset-bottom) + 78px);transition-property:opacity;}
#home-add svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;}

body.settings-open{overflow:hidden;}
#settings-modal{display:flex;align-items:flex-end;justify-content:center;padding:max(12px,env(safe-area-inset-top)) 0 0;overflow:hidden;background:var(--settings-scrim);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .36s ease,visibility 0s .36s;}
#settings-modal.on{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s;}
#settings-modal #set-card{position:relative;box-sizing:border-box;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:50px max(24px,calc((100vw - 680px)/2)) calc(32px + env(safe-area-inset-bottom));border-radius:30px 30px 0 0;background:var(--home-background);color:var(--settings-ink);box-shadow:none;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .42s cubic-bezier(.2,.75,.25,1);--ink:var(--settings-ink);--soft:var(--settings-muted);--sheet:var(--settings-group);--line:var(--settings-line);}
#settings-modal.on #set-card{transform:translateY(0);}
.settings-handle{position:absolute;top:12px;left:calc(50% - 18px);width:36px;height:4px;border-radius:2px;background:var(--settings-handle);}
#settings-modal #set-card h2{font:700 30px/42px var(--ui);letter-spacing:-.5px;margin:0 0 20px;}
#settings-modal #set-close{position:absolute;right:24px;top:20px;float:none;width:36px;height:36px;font:400 23px/1 var(--ui);background:var(--settings-close);color:var(--settings-ink);}
#settings-modal .set-tabs{display:none;}
#settings-modal #set-card .set-panel{display:block;}
.settings-section-title{font:500 11px/16px var(--ui);color:var(--settings-muted);margin:26px 0 10px;text-transform:uppercase;letter-spacing:.2px;}
#sm-body>.settings-section-title:first-child{margin-top:0;}
.settings-account-group,.settings-actions-group,#settings-modal .set-row{background:var(--settings-group);border-radius:15px;padding:16px;margin-bottom:0;}
.settings-account-group .sm-account{margin:0;padding:0 0 14px;border-bottom:1px solid var(--settings-line);}
.settings-account-group .sm-account small{display:block;font:400 14px/18px var(--ui);color:var(--settings-muted);margin-bottom:4px;}
.settings-account-group .sm-account b{font:600 16px/22px var(--ui);color:var(--settings-ink);}
.settings-sync-row{padding-top:14px;}
.settings-sync-row>b{display:block;font:500 16px/20px var(--ui);}
.settings-sync-row>span{display:block;margin-top:3px;font:400 13px/18px var(--ui);color:var(--settings-muted);}
#settings-modal .settings-sync-row button{margin:8px 0 0;}
#settings-modal .settings-actions-group>button{display:block;width:100%;text-align:left;text-decoration:none;padding:0;min-height:32px;margin:0;border:0;background:none;color:var(--settings-ink);font:400 16px/22px var(--ui);}
#settings-modal .settings-actions-group>button+button{border-top:1px solid var(--settings-line);margin-top:8px;padding-top:12px;min-height:40px;}
#settings-modal .settings-actions-group>button.sm-linkish{color:var(--settings-danger);}
.settings-sync-note{font:400 13px/18px var(--ui);color:var(--settings-muted);margin:26px 0;}
#settings-modal .set-row{flex-direction:row;align-items:center;gap:14px;margin-bottom:1px;border-radius:0;min-height:62px;}
#settings-modal .set-row:nth-child(2){border-radius:15px 15px 0 0;}
#settings-modal .set-row:last-child,#settings-modal .set-row:has(+[hidden]){border-radius:0 0 15px 15px;}
#settings-modal .set-label b{font-size:16px;font-weight:500;}
#settings-modal .set-label span{font-size:12px;}
#settings-modal .set-seg button{padding:8px;}
@media(max-width:359px){#settings-modal .set-row{flex-wrap:wrap;}#settings-modal .set-seg{width:100%;}}
@media(prefers-reduced-motion:reduce){#settings-modal,#settings-modal #set-card{transition:none;}}

#settings-modal #sm-body>.desc{background:var(--settings-group);border-radius:15px;padding:16px;}
#settings-modal .sm-vault{background:var(--settings-group);border-color:var(--settings-line);color:var(--settings-ink);}
#settings-modal .sm-vault p{color:var(--settings-muted);}

/* Book and article import shares the expanded word popup's glass surface. */
#add-modal{display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));overflow:hidden;background:var(--sentence-glass-scrim);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .24s ease,visibility 0s .24s;}
#add-modal.on{visibility:visible;opacity:1;pointer-events:auto;transition-delay:0s;}
#add-modal #am-card{position:relative;isolation:isolate;box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:min(76vh,760px);margin:0;padding:22px 22px 24px;border:1px solid var(--sentence-glass-line);border-radius:22px;background:var(--sentence-glass-solid);color:var(--sentence-glass-ink);box-shadow:var(--sentence-glass-shadow);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateY(5px) scale(.985);transition:transform .24s cubic-bezier(.2,.7,.25,1);--ink:var(--sentence-glass-ink);--soft:var(--sentence-glass-muted);--sheet:var(--sentence-glass-action);--line:var(--sentence-glass-line);}
#add-modal #am-card::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(145deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.07) 44%,rgba(255,255,255,.16) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.42);}
body.dark #add-modal #am-card::before{background:linear-gradient(145deg,rgba(255,255,255,.15) 0%,rgba(255,255,255,.025) 46%,rgba(255,255,255,.07) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#add-modal #am-card{background:var(--sentence-glass-surface);backdrop-filter:blur(18px) saturate(112%);-webkit-backdrop-filter:blur(18px) saturate(112%);}}
#add-modal.on #am-card{transform:translateY(0) scale(1);}
#add-modal #am-card .am-step{position:relative;z-index:1;}
#add-modal #am-card h2{font:650 22px/30px var(--ui);letter-spacing:-.35px;margin:0 0 7px;color:var(--sentence-glass-ink);}
#add-modal #am-card .desc{font-size:13.5px;line-height:1.6;color:var(--sentence-glass-muted);margin-bottom:16px;}
#add-modal #am-card .desc b{color:var(--sentence-glass-ink);}
#add-modal .am-choices{gap:9px;margin-top:18px;}
#add-modal .am-big{gap:14px;padding:14px;border:1px solid var(--sentence-glass-line);border-radius:16px;background:var(--sentence-glass-action);color:var(--sentence-glass-ink);transition:background .18s ease,transform .18s ease;}
#add-modal .am-big:hover{background:var(--sentence-glass-action-hover);}
#add-modal .am-big:active{transform:scale(.985);}
#add-modal .am-big:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
#add-modal .am-big .am-ico{width:42px;height:42px;min-width:42px;border:1px solid var(--sentence-glass-line);border-radius:13px;background:var(--sentence-glass-action);color:var(--sentence-glass-secondary);}
#add-modal .am-big .am-t{font-size:15px;font-weight:550;}
#add-modal .am-big .am-d{font-size:12.5px;color:var(--sentence-glass-muted);}
#add-modal .am-back{padding:0 0 14px;color:var(--sentence-glass-secondary);}
#add-modal #am-text,#add-modal #am-url{border-color:var(--sentence-glass-line);border-radius:14px;background:var(--sentence-glass-action);color:var(--sentence-glass-ink);}
#add-modal #am-text:focus,#add-modal #am-url:focus{border-color:var(--blue);}
#add-modal .sm-btn.primary{min-height:48px;border-radius:16px;font:600 15px var(--ui);}
@media(prefers-reduced-motion:reduce){#add-modal,#add-modal #am-card{transition:none;}#add-modal .am-big{transition:none;}}

#home-controls>#nav-home,#home-controls>#nav-vocab{display:none;}
#home-resume-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;}
#home-resume:disabled{cursor:default;}
#v-home .sec-head h2{font:700 28px/34px 'Noto Sans KR',var(--ui);letter-spacing:0;}
#v-home .section-link{display:flex;align-items:center;gap:8px;border:0;padding:0;background:none;color:var(--settings-ink);font:inherit;letter-spacing:inherit;cursor:pointer;text-align:left;}
#v-home .section-link svg{width:20px;height:20px;flex:none;transform:translateY(1px);fill:none;stroke:var(--settings-muted);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

#home-controls{display:none;}
body:has(:is(#v-home,#v-casuals,#v-longform).on) #home-controls{display:block;}
#v-casuals h1,#v-longform h1{font:700 28px/34px 'Noto Sans KR',var(--ui);letter-spacing:0;color:var(--settings-ink);}
#v-casuals,#v-longform{padding-bottom:calc(90px + env(safe-area-inset-bottom));}
/* Animate the surface boundary; the words inside never stretch into a page. */
html.home-resuming::view-transition-new(root){animation:home-glass-open .34s cubic-bezier(.2,.75,.25,1) both;mix-blend-mode:normal;}
html.home-resuming::view-transition-old(root){animation:none;opacity:1;mix-blend-mode:normal;}
html.home-returning::view-transition-old(root){z-index:2;animation:home-glass-close .34s cubic-bezier(.2,.75,.25,1) both;mix-blend-mode:normal;}
html.home-returning::view-transition-new(root){animation:none;opacity:1;mix-blend-mode:normal;}
@keyframes home-glass-open{from{clip-path:inset(var(--resume-inset) round 32px);opacity:1;}to{clip-path:inset(0 round 0);opacity:1;}}
@keyframes home-glass-close{from{clip-path:inset(0 round 0);opacity:1;}85%{opacity:1;}to{clip-path:inset(var(--resume-inset) round 32px);opacity:0;}}
html:has(:is(#v-home,#v-casuals,#v-longform).on){overscroll-behavior-y:contain;}
/* Browser fallback stays above the Home logo; iOS uses UIRefreshControl. */
#library-refresh{position:fixed;z-index:80;left:50%;top:calc(env(safe-area-inset-top) + 2px);width:22px;height:22px;display:grid;place-items:center;pointer-events:none;color:var(--settings-muted);opacity:0;transform:translateX(-50%);transition:opacity .2s ease;}
#library-refresh.pulling{transition:none;}
#library-refresh[hidden]{display:none;}
.refresh-spinner{width:16px;height:16px;border:1.8px solid currentColor;border-right-color:transparent;border-radius:50%;}
#library-refresh.refreshing .refresh-spinner{animation:library-refresh-spin .8s linear infinite;}
@keyframes library-refresh-spin{to{rotate:360deg;}}
@media(prefers-reduced-motion:reduce){#library-refresh{transition:none;}#library-refresh.refreshing .refresh-spinner{animation:none;}}

/* Penpot Thunderhead cloud + lightning, independent of shared glass material. */
#home-controls #nav-vocab svg{width:24px;height:24px;stroke:#1688b6;stroke-width:1.8;}
body.dark #home-controls #nav-vocab svg{stroke:#65c6ea;}

.home-resume-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:100%;}
#home-resume-percent{font-size:10px;line-height:13px;opacity:.8;}
#home-resume .completion-badge{margin-left:7px;}

#settings-modal .set-row.onboarding-setting{border-radius:15px;margin-bottom:20px;}

/* The same control surface owns both ends of the Home/Reader journey. */
html:is(.home-resuming,.home-returning) :is(#home-resume,#readpill){view-transition-name:reader-control;}
html:is(.home-resuming,.home-returning)::view-transition-group(reader-control){
  z-index:3;animation-duration:.34s;animation-timing-function:cubic-bezier(.2,.75,.25,1);
}
html:is(.home-resuming,.home-returning)::view-transition-old(reader-control),
html:is(.home-resuming,.home-returning)::view-transition-new(reader-control){animation-duration:.16s;mix-blend-mode:normal;}