/* Общая карточка и её дочерние окна; размеры следуют видимой области iPhone. */
#details{display:flex;flex-direction:column;overflow:hidden;max-height:calc(100% - 12px);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(145deg,color-mix(in srgb,var(--fg) 10%,var(--bg)),color-mix(in srgb,var(--fg) 3%,var(--bg)));border-color:color-mix(in srgb,var(--fg) 25%,transparent);color:var(--fg);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
#details>.grabber{flex:none;margin:0 auto 4px}
#details .draft-close{top:2px;right:4px;width:44px;height:44px;z-index:2;border-radius:var(--r-12);border:1px solid color-mix(in srgb,var(--c-urgent) 28%,transparent);background:color-mix(in srgb,var(--c-urgent) 12%,transparent);color:var(--c-urgent-text);font-size:var(--fs-h2)}
.task-card-body{min-height:0;overflow-y:auto;flex:1 1 auto;padding-top:28px;scrollbar-width:none;overscroll-behavior-y:contain;scroll-padding:12px}
#details #dtTitle,#details.is-new #dtTitle{margin:0 0 8px;padding:9px 12px;min-height:44px;font-size:var(--fs-h3);line-height:var(--lh-h3);border-radius:var(--r-14);border-color:color-mix(in srgb,var(--fg) 24%,transparent);background:color-mix(in srgb,var(--fg) 4%,transparent);color:var(--fg)}
#details #dtTitle:empty:before{content:'Название задачи';color:color-mix(in srgb,var(--fg) 55%,var(--bg))}
#details .draft-description{padding:6px 10px!important;margin:0 0 8px!important;border-color:color-mix(in srgb,var(--fg) 22%,transparent)!important;background:color-mix(in srgb,var(--fg) 3%,transparent)}
#details #dtBody{height:32px;max-height:32px;padding:0;font-size:var(--fs-lead);line-height:var(--lh-caption);color:var(--fg)}
#details #dtBody::placeholder{color:color-mix(in srgb,var(--fg) 60%,var(--bg))}
#details #dtMeta{min-height:36px;margin:0 0 8px;padding:6px 10px}
#details #dtMeta[hidden],#details #dtActs[hidden]{display:none!important}
#details .draft-meta-row{margin:0 0 8px}
#details #draftDate{min-height:44px;font-size:var(--fs-small)!important;border-color:color-mix(in srgb,var(--inbox-violet) 38%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--inbox-violet) 16%,var(--bg)),color-mix(in srgb,var(--inbox-violet) 7%,var(--bg)));color:var(--fg)}
.task-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 8px}
#dtFlags .dt-act{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;min-width:0;min-height:44px;padding:6px!important;border:1px solid color-mix(in srgb,var(--fg) 24%,transparent);border-radius:var(--r-12);background:color-mix(in srgb,var(--fg) 4%,transparent);font-size:var(--fs-small);color:var(--fg)}
#dtFlags .ico{flex:none;width:17px;height:17px}
#dtFlags #dtUrg[aria-checked=true]{background:color-mix(in srgb,var(--c-urgent) 35%,var(--bg));color:var(--c-urgent-text);border-color:var(--c-urgent-text)}
#dtFlags #dtImp[aria-checked=true]{background:color-mix(in srgb,var(--home-gold) 12%,var(--bg));color:var(--home-gold);border-color:var(--home-gold)}
#dtFlags #dtImp[aria-checked=false]{color:var(--fg)}
#details #dtRemind{margin:0;padding:6px!important;gap:5px;background:color-mix(in srgb,var(--fg) 4%,transparent)!important;border-color:color-mix(in srgb,var(--fg) 24%,transparent)!important}
#details #dtRemind .dt-k{font-size:var(--fs-small);color:var(--fg)}
#details #dtRemind .dt-v,#details #dtRemind .chev{display:none}
.task-reminder-glyph{display:flex}
#details #dtRemind.has-reminders{background:color-mix(in srgb,var(--inbox-violet) 17%,var(--bg))!important;border-color:color-mix(in srgb,var(--inbox-violet) 55%,transparent)!important}
#details #dtActs{grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 8px!important}
#details #dtActs .dt-act{min-height:44px!important}
#details .dt-rows:empty{display:none}
#details .dt-sec:not(.draft-description){padding:8px 10px!important;margin:0 0 8px;border:1px solid color-mix(in srgb,var(--inbox-violet) 40%,transparent);border-radius:var(--r-14);background:linear-gradient(145deg,color-mix(in srgb,var(--inbox-violet) 8%,var(--bg)),color-mix(in srgb,var(--fg) 3%,var(--bg)));box-shadow:inset 0 1px color-mix(in srgb,var(--fg) 15%,transparent)}
#details .sec-head{margin:0;min-height:44px}
#details .dt-h{font-size:var(--fs-small);color:var(--fg)!important}
#details #dtFileAdd,#details #dtAdd button{width:auto;min-height:44px;margin:0;padding:6px 10px;border:1px solid color-mix(in srgb,var(--inbox-violet) 38%,transparent);border-radius:var(--r-12);font-size:var(--fs-small);background:color-mix(in srgb,var(--inbox-violet) 12%,transparent);color:var(--fg)}
#details #dtAdd{margin:0;padding:0;border:0}
#details.is-new .task-file-empty{display:none}
#details #dtFiles:not(:empty),#details #dtSteps:not(:empty){margin-top:4px}
#details .draft-file{border-color:color-mix(in srgb,var(--fg) 22%,transparent);background:color-mix(in srgb,var(--fg) 4%,transparent)}
#details .draft-step{gap:6px;margin-top:4px;padding:3px!important;background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:color-mix(in srgb,var(--fg) 24%,transparent)}
#details .draft-step [data-check-step],#details .draft-step [data-remove-step]{width:44px;height:44px;min-height:44px;border-radius:var(--r-round);border:1px solid color-mix(in srgb,var(--fg) 28%,transparent);font-size:var(--fs-h3);color:var(--fg)}
#details .draft-step [data-check-step][aria-pressed=true]{background:color-mix(in srgb,var(--inbox-green) 28%,var(--bg));border-color:var(--inbox-green);border-radius:var(--r-round);color:var(--inbox-green)}
#details .draft-step [data-remove-step]{background:color-mix(in srgb,var(--c-urgent) 20%,var(--bg));border-color:color-mix(in srgb,var(--c-urgent) 40%,transparent);color:var(--c-urgent-text)}
#details .draft-step .task-step-text{flex:1;min-width:0;width:auto;height:auto;min-height:44px;padding:6px 2px;text-align:left;font-size:var(--fs-small);line-height:var(--lh-caption);overflow-wrap:anywhere;color:var(--fg)}
#details .draft-step .task-step-text:disabled{opacity:1}
#details #dtRep{min-height:44px;padding:8px 10px!important;margin:0;border-color:color-mix(in srgb,var(--inbox-violet) 40%,transparent)!important;background:color-mix(in srgb,var(--inbox-violet) 8%,var(--bg))!important;color:var(--fg)}
#details #dtRep .prop-v{max-width:65%;text-align:right}
#details .dt-foot,#details:focus-within .dt-foot{position:relative;flex:none;margin:0;padding:8px 0 0;background:transparent!important;box-shadow:none;border-top:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
.task-card-footer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#details #dtCancel,#details #dtDone{width:100%;height:44px;min-height:44px;margin:0!important;padding:8px;border-radius:var(--r-14);border:1px solid color-mix(in srgb,var(--inbox-green) 50%,transparent);font-size:var(--fs-sub);background:color-mix(in srgb,var(--inbox-green) 22%,var(--bg))!important;color:var(--fg)}
#details #dtCancel{border-color:color-mix(in srgb,var(--c-urgent) 40%,transparent);background:color-mix(in srgb,var(--c-urgent) 18%,var(--bg))!important;color:var(--c-urgent-text)}
.draft-error:empty,.draft-picker-error:empty{display:none}
.draft-error,.draft-picker-error{font-size:var(--fs-small);color:var(--c-urgent-text);margin:0 0 8px}

/* Одинаковые стеклянные листы, отдельный крестик и закреплённый низ. */
#taskChild{display:flex;flex-direction:column;max-height:calc(100% - 12px);overflow:hidden;padding:12px!important;border-radius:var(--r-card) var(--r-card) 0 0!important;background:linear-gradient(145deg,color-mix(in srgb,var(--fg) 12%,var(--bg)),color-mix(in srgb,var(--fg) 4%,var(--bg)))!important;border-color:color-mix(in srgb,var(--fg) 30%,transparent)!important;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);color:var(--fg)}
#taskChild>.grabber,#taskChild>header,#taskChild>footer{flex:none}
#taskChild>header{align-items:center;gap:12px;margin:0 0 8px}
#taskChild>header h2{margin:0;padding:8px 12px;border:1px solid color-mix(in srgb,var(--inbox-violet) 40%,transparent);border-radius:var(--r-12);background:color-mix(in srgb,var(--inbox-violet) 13%,transparent);font-size:var(--fs-sub);color:var(--fg)}
#taskChild>header [data-cancel]{margin-left:auto;flex:none;width:44px;padding:0;border-color:color-mix(in srgb,var(--c-urgent) 35%,transparent);background:color-mix(in srgb,var(--c-urgent) 14%,transparent);color:var(--c-urgent-text);font-size:var(--fs-h2)}
#taskChild .draft-child-body{min-height:0;overflow-y:auto;max-height:none;overscroll-behavior-y:contain}
#taskChild>footer{margin-top:10px;padding-top:8px;border-top:1px solid color-mix(in srgb,var(--fg) 16%,transparent)}
#taskChild>footer [data-cancel]{background:color-mix(in srgb,var(--c-urgent) 16%,var(--bg));border-color:color-mix(in srgb,var(--c-urgent) 35%,transparent);color:var(--c-urgent-text)}
#taskChild>footer [data-apply]{background:color-mix(in srgb,var(--inbox-green) 22%,var(--bg));border-color:color-mix(in srgb,var(--inbox-green) 50%,transparent);color:var(--fg)}
#taskChild .draft-month{gap:8px;padding:5px;border:1px solid color-mix(in srgb,var(--inbox-ice) 30%,transparent);border-radius:var(--r-14);background:color-mix(in srgb,var(--inbox-ice) 10%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--fg) 20%,transparent)}
#taskChild .draft-month b{flex:1;text-align:center;font-size:var(--fs-small);color:var(--fg)}
#taskChild .draft-month button{border:0;background:color-mix(in srgb,var(--fg) 5%,transparent)}
#taskChild .draft-calendar{gap:3px;margin:10px 0;font-size:var(--fs-small)}
#taskChild .draft-calendar>span{font-size:var(--fs-micro);padding:3px 0;color:color-mix(in srgb,var(--fg) 60%,var(--bg))}
#taskChild .draft-calendar button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:46px;border:1px solid transparent;border-radius:var(--r-12);font-size:var(--fs-small);color:var(--fg);background:color-mix(in srgb,var(--fg) 3%,transparent)}
#taskChild .draft-calendar button.is-today{color:var(--fg);background:color-mix(in srgb,var(--inbox-blue) 20%,var(--bg));border-color:color-mix(in srgb,var(--inbox-blue) 60%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--fg) 20%,transparent)}
#taskChild .draft-calendar button[aria-pressed=true]{background:color-mix(in srgb,var(--inbox-violet) 24%,var(--bg));border-color:color-mix(in srgb,var(--inbox-violet) 65%,transparent)}
#taskChild .draft-date-dots{display:flex;align-items:center;justify-content:center;gap:2px;height:8px;min-width:20px;margin-top:2px}
.draft-date-dots i{display:block;width:3px;height:3px;border-radius:var(--r-round);background:color-mix(in srgb,var(--inbox-ice) 60%,var(--fg))}
.draft-date-dots em{font-size:var(--fs-micro);font-style:normal;line-height:var(--lh-micro)}
#taskChild .draft-inbox,#taskChild .draft-no-time{display:block;width:auto;min-height:44px;padding:8px 16px;margin:8px auto;border-color:color-mix(in srgb,var(--inbox-ice) 40%,transparent);background:color-mix(in srgb,var(--inbox-ice) 15%,transparent);font-size:var(--fs-small);color:var(--fg)}
#taskChild .draft-no-time{margin:0 auto 8px;background:color-mix(in srgb,var(--inbox-violet) 12%,transparent)}
.task-time-date{text-align:center;font-size:var(--fs-small);margin:0 0 8px;color:color-mix(in srgb,var(--fg) 70%,var(--bg))}
#taskChild .draft-wheels{display:flex;height:248px;gap:12px;margin:4px 0 0;mask-image:none;overflow:hidden}
#taskChild .draft-wheels:before{display:none}
.task-time-column{position:relative;width:100px;text-align:center;perspective:300px}
.task-time-column>span{display:block;height:24px;font-size:var(--fs-micro);color:color-mix(in srgb,var(--fg) 65%,var(--bg))}
.task-time-column:after{content:'';position:absolute;left:2px;right:2px;top:112px;height:44px;border-radius:var(--r-12);pointer-events:none;background:linear-gradient(150deg,color-mix(in srgb,var(--fg) 14%,transparent),color-mix(in srgb,var(--fg) 4%,transparent));border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);box-shadow:inset 0 1px color-mix(in srgb,var(--fg) 35%,transparent),0 4px 12px color-mix(in srgb,var(--bg) 30%,transparent)}
#taskChild .draft-wheel{width:100px;height:220px;padding:88px 0;scroll-snap-type:y mandatory;mask-image:linear-gradient(transparent,black 25%,black 75%,transparent)}
#taskChild .draft-wheel button{height:44px;min-height:44px;font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--fg);transform:perspective(300px) rotateX(var(--wheel-angle,0deg)) scale(var(--wheel-scale,1));opacity:var(--wheel-opacity,1);transform-origin:center;will-change:transform}
#taskChild .draft-wheel button[aria-selected=true]{font-weight:650;text-shadow:0 1px 8px color-mix(in srgb,var(--fg) 20%,transparent)}
#taskChild .draft-reminder-presets{margin:4px 0 10px}
#taskChild .draft-reminder-presets button,#taskChild .draft-custom-date{font-size:var(--fs-small);color:var(--fg);background:color-mix(in srgb,var(--fg) 4%,transparent);border-color:color-mix(in srgb,var(--fg) 24%,transparent)}
#taskChild .draft-reminder-presets button[aria-pressed=true]{background:color-mix(in srgb,var(--inbox-violet) 20%,transparent);border-color:color-mix(in srgb,var(--inbox-violet) 60%,transparent)}
#taskChild .draft-custom-date{width:100%;background:color-mix(in srgb,var(--inbox-ice) 14%,transparent)}
.draft-picker-hint{font-size:var(--fs-small);color:color-mix(in srgb,var(--fg) 65%,var(--bg));margin:8px 0}
#taskChild .reminder-added{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 24%,transparent)}
#taskChild .reminder-added button{color:var(--c-urgent-text);background:color-mix(in srgb,var(--c-urgent) 12%,transparent)}
#taskChild #draftBodyEditor{width:100%;height:32vh;min-height:80px;font-size:var(--fs-lead);line-height:var(--lh-caption);padding:10px;border-radius:var(--r-14);border-color:color-mix(in srgb,var(--fg) 28%,transparent);background:color-mix(in srgb,var(--fg) 4%,var(--bg));color:var(--fg)}
#taskChild #draftBodyEditor.task-step-editor{height:112px}
#taskChild select,#taskChild input[type=number]{background:color-mix(in srgb,var(--fg) 5%,var(--bg));border:1px solid color-mix(in srgb,var(--fg) 25%,transparent);color:var(--fg);font-size:var(--fs-lead)}
#taskChild select{margin-bottom:12px}
#taskChild label{font-size:var(--fs-small)}
#taskChild .draft-weekdays{gap:6px}
#taskChild .draft-weekdays label{min-height:44px;padding:4px 6px;border:1px solid color-mix(in srgb,var(--fg) 20%,transparent);border-radius:var(--r-12)}
#phone.kb #taskChild{max-height:calc(100% - 4px)}
@media(max-width:360px){#dtFlags .dt-act,#details #dtRemind .dt-k{font-size:var(--fs-micro)}#dtFlags .ico{width:15px;height:15px}#details #dtAdd button{font-size:var(--fs-micro);padding:6px 8px}}
@media(prefers-reduced-motion:reduce){#taskChild .draft-wheel button{transform:scale(var(--wheel-scale,1))}}