/* Türkçe Atelier 7 · app layer: phone shell, Daily prompts, install, reminders. Loaded after theme.css. */

/* ---------- bottom tab bar (phones) ---------- */
#tabbar{display:none}
@media (max-width:650px){
 #tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
 #tabbar .tab{position:relative;display:grid;justify-items:center;gap:2px;background:none;border:0;padding:6px 0 4px;color:var(--muted);font:600 11.5px/1.1 var(--sans);font-size-adjust:none;min-height:50px;border-radius:12px;-webkit-tap-highlight-color:transparent}
 #tabbar .tab .ic{width:24px;height:24px;stroke-width:1.8}
 #tabbar .tab.on{color:var(--accent)}
 #tabbar .tab.on .ic{stroke-width:2.2}
 #tabbar .tab:active{background:var(--accentsoft)}
 .tab-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--bole);color:#fff;font:700 11px/18px var(--sans);font-style:normal;font-size-adjust:none}
 .tab-dot{position:absolute;top:6px;left:calc(50% + 9px);width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid var(--panel)}
 .shell{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
 footer{display:none}
 #menu{display:none!important}
 header{position:sticky;top:0;z-index:30;height:auto;min-height:52px;padding:calc(6px + env(safe-area-inset-top)) 12px 6px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;border-image:none!important}
 #breadcrumb{font:600 17px var(--serif);visibility:visible}
 header .rank-chip,#sync-dot{display:none}
 #sidebar{bottom:calc(64px + env(safe-area-inset-bottom));top:0;height:auto;border-radius:0 0 16px 0}
 .menu-open .scrim{bottom:calc(64px + env(safe-area-inset-bottom))}
 #toast{bottom:calc(84px + env(safe-area-inset-bottom))!important}
 main{padding-top:14px!important}
 .page-heading h1{font-size:30px}
}
html.standalone body{overscroll-behavior-y:none}
html.standalone header{padding-top:calc(8px + env(safe-area-inset-top))}
@media (max-width:650px){html.standalone .page-heading .eyebrow:first-child{display:none}}

/* ---------- install ---------- */
.install-banner{display:grid;grid-template-columns:40px 1fr auto auto;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 8px 10px 12px;margin-bottom:16px}
.install-banner .ib-icon svg{width:40px;height:40px;border-radius:10px;display:block}
.ib-text{display:grid;line-height:1.25}.ib-text small{color:var(--muted);font-size:13px}
.install-banner .button{min-height:38px;padding:6px 14px}
.install-wrap{display:grid;gap:20px;max-width:640px}
.install-steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.install-steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:2px 12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.install-steps li:last-child{border-bottom:0}
.install-steps li::before{content:counter(s);grid-row:span 2;width:32px;height:32px;border-radius:50%;background:var(--accentsoft);color:var(--accent);display:grid;place-items:center;font:700 15px var(--sans)}
.install-steps b{font-size:17px}.install-steps span{color:var(--muted);font-size:15px}

/* ---------- Daily ---------- */
.daily-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:900px){.daily-grid{grid-template-columns:1fr}}
.daily-list{display:grid;gap:12px}
.daily-slot{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;padding:18px 18px 18px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:inherit;text-decoration:none;min-height:88px;position:relative}
.daily-slot:hover{border-color:var(--accent)}
.daily-slot.now{border-color:var(--accent);box-shadow:inset 4px 0 0 var(--accent)}
.daily-slot.done{background:color-mix(in srgb,var(--turqsoft) 55%,var(--panel))}
.ds-time{display:grid;line-height:1.1}
.ds-time b{font:500 24px var(--serif);color:var(--ink)}
.ds-time small{font-size:13px;color:var(--muted)}
.ds-body{display:grid;gap:3px;min-width:0}
.ds-body b{font-size:17px}
.ds-body small{color:var(--muted);font-size:14px;line-height:1.35}
.ds-body small .tr{color:var(--ink);font-size:16px}
.ds-state{font:700 14px var(--sans);color:var(--accent);white-space:nowrap}
.daily-slot:not(.now):not(.done) .ds-state{color:var(--muted);font-weight:500}
.ds-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--turq);color:#fff;font-size:15px}
@media (max-width:650px){.daily-slot{grid-template-columns:62px 1fr auto;gap:12px;padding:14px 14px 14px 12px}.ds-time b{font-size:21px}}
.dw-row{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:14px 0 6px}
.dw{display:grid;justify-items:center;gap:6px}
.dw-dots{display:grid;gap:3px}
.dw-dots i{display:block;width:22px;height:8px;border-radius:4px;background:var(--line)}
.dw-dots i.on{background:var(--turq)}
.dw small{font-size:12px;color:var(--muted)}
.dw.today small{color:var(--ink);font-weight:700}
.rem-rows{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:10px}
.rem-row{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);min-height:52px}
.rem-row:last-child{border-bottom:0}
.rem-row input[type=time]{min-height:40px;padding:4px 8px;font-variant-numeric:tabular-nums;width:auto}

.slot-head{margin:4px 0 20px}
.slot-step{font:600 14px var(--sans);color:var(--muted)}
.slot-head h1{font-size:clamp(30px,4vw,42px);margin:4px 0 0}
.daily-focus{display:grid;gap:18px;max-width:720px}
.big-word .bw-tr{font:500 clamp(48px,9vw,72px)/1 var(--serif);color:var(--ink);margin:14px 0 8px;letter-spacing:-.01em}
.big-word .bw-en{font-size:19px;margin:0 0 12px}
.big-word .bw-ex{font:20px/1.5 var(--serif);margin:0}
.use-today{background:var(--accentsoft);border-color:transparent}
.use-today .ut-tr{font:500 26px/1.3 var(--serif);margin:8px 0 4px}
.daily-focus textarea{width:100%;font:20px/1.5 var(--serif);padding:12px 14px;min-height:0;resize:vertical}
.evening .ev-q{font:500 26px/1.3 var(--serif);margin:10px 0 18px}
.ev-label{font:600 14px var(--sans);color:var(--muted);margin:14px 0 8px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px}
.chip-row .chip{background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:999px;padding:7px 14px;font-size:16px;min-height:40px;color:var(--ink);cursor:pointer}
.chip-row .chip.tr{font-family:var(--serif);font-size:17px}
.chip-row .chip:hover,.chip-row .chip:active{border-color:var(--accent);background:var(--accentsoft)}
.chip-row .chip .muted{font-size:14px}
.model{background:var(--bg);border-radius:var(--r-sm);padding:12px 16px;margin:12px 0 4px;border-left:3px solid var(--turq)}
.model p[lang=tr]{font-size:19px;margin:0 0 4px}
.ev-check{display:grid;gap:4px;margin:12px 0}
.ev-check .check-label{font-size:15px;min-height:36px}
.next-slot{display:grid;gap:8px;justify-items:start;padding:18px 0 4px}
.next-slot p{margin:0}

/* home: daily row stands out in the plan */
.plan-row[href^="#daily"] .plan-check{border-color:var(--gold);color:var(--gold)}
.plan-row[href^="#daily"].done .plan-check{background:var(--turq);border-color:var(--turq);color:#fff}
@media (max-width:650px){
 .menu-open #sidebar{z-index:36!important;padding-top:calc(18px + env(safe-area-inset-top))}
 .menu-open .scrim{z-index:35!important}
}

/* ===== phone pass 1 ===== */
@media (max-width:650px){
 #toast{top:calc(60px + env(safe-area-inset-top))!important;bottom:auto!important;left:12px!important;right:12px!important;transform:none!important;max-width:none!important}
 body.typing #tabbar{display:none}
 body.typing .shell{padding-bottom:16px}
 .page-heading h1{font-size:28px;line-height:1.12}
 .page-heading p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:16px!important}
 body.has-back .page-heading .back-link,body.has-back .back-link{display:none!important}
 #hdr-back{margin-left:-8px;margin-right:2px;color:var(--accent)}
 header{gap:4px}
 .keyboard{display:grid!important;grid-template-columns:repeat(8,1fr);gap:4px}.keyboard button{min-height:44px!important;min-width:0!important;padding:0}
 .back-link{min-height:44px}
 .dialogue-line .w,#sc-choices .w,.sc-line .w,.reading-text.inline .w{padding:6px 1px;line-height:1.9}
 .word-pop.sheet::before{content:'';display:block;width:36px;height:4px;border-radius:2px;background:var(--line);margin:-6px auto 12px}
 .word-pop .wp-word,.word-pop h3,.word-pop .tr:first-child{font:500 26px var(--serif)}
 .w-keys{margin-inline:-14px}.w-keys div{gap:3px}
 .chips .chip{min-height:40px;padding:7px 14px;font-size:16px}
}
@media (hover:none){.choice .key{display:none!important}}
.kin-cell::before{grid-column:1/-1}
.series-nav a{white-space:nowrap;min-width:44px;justify-content:center}
.series-nav .muted{flex:1;min-width:0}
#settings-form>.button,#settings-form button.button:last-child{display:none}
@media (max-width:650px){.word-pop b:first-of-type{font:500 26px var(--serif)}.word-pop .small{font-size:16px}}

/* ===== phone pass 2 ===== */
@media (max-width:650px){
 #sidebar,.scrim,#menu-close{display:none!important}
 #more-scrim{position:fixed;inset:0;background:#0b152680;z-index:44;opacity:0;pointer-events:none;transition:opacity .2s}
 #more-sheet{position:fixed;left:0;right:0;bottom:0;z-index:45;max-height:86dvh;overflow-y:auto;background:var(--bg);border-radius:18px 18px 0 0;padding:6px 16px calc(84px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px #0b152633}
 .more-open #more-sheet{transform:none}.more-open #more-scrim{opacity:1;pointer-events:auto}
 .more-open #tabbar{z-index:46}
 .more-handle{width:36px;height:4px;border-radius:2px;background:var(--line);margin:6px auto 4px}
 .more-head{display:flex;align-items:center;justify-content:space-between;padding:4px 0 6px}
 .more-head h2{margin:0;font-size:24px}
 #more-sheet section h3{font:600 14px var(--sans);color:var(--muted);margin:14px 0 8px}
 .more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .more-item{display:grid;justify-items:center;align-content:start;gap:6px;padding:12px 6px;background:var(--panel);border:1px solid var(--line);border-radius:14px;color:var(--ink);text-decoration:none;font:500 13.5px/1.25 var(--sans);text-align:center;min-height:84px;font-size-adjust:none}
 .more-item .mi-ic{color:var(--accent)}
 .more-item:active{background:var(--accentsoft)}
 body.in-session #tabbar{display:none}
 body.in-session .shell{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
 .in-session .rating-grid{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));background:var(--bg);padding:8px 0;z-index:5}
 #search-dialog{margin:0;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;border-radius:0;padding:calc(12px + env(safe-area-inset-top)) 16px 16px;border:0}
 #search-dialog h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 #search-dialog .close{position:absolute;right:8px;top:calc(8px + env(safe-area-inset-top))}
 #global-search{margin-right:48px;width:calc(100% - 48px)!important}
 .segmented button,.deck-settings summary,.check-label{min-height:44px;display:flex;align-items:center}
 .install-banner .button,#ib-close{min-height:44px;min-width:44px}
 /* home: hero first, plan as a compact list, extras in a swipe row */
 .home-main .vod{display:none}
 .home-side{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-inline:-16px;padding:0 16px 4px;scrollbar-width:none}
 .home-side::-webkit-scrollbar{display:none}
 .home-side>.card{flex:0 0 84%;scroll-snap-align:start}
 .plan-row small{display:none}
}
.reveal-btn{display:block;margin:18px auto 0;min-width:200px}
