/* Planner forms share one mobile scroll area. Desktop sections keep their layout. */
.planner-dialog-content{display:contents}
@media screen{
 body:has(#chrome-app.mobile-shell) #modalov:has(.planner-form-sheet){z-index:110;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden;align-items:center}
 body:has(#chrome-app.mobile-shell) #modal:has(.planner-form-sheet){width:100%;max-width:940px;min-width:0;margin:0;max-height:100%}
 body:has(#chrome-app.mobile-shell) .sheet.planner-form-sheet{--card:var(--ui-card);--board:var(--ui-board);--soft:var(--ui-soft);--line:var(--ui-line);--ink:var(--ui-ink);--ink2:var(--ui-ink2);--ink3:var(--ui-ink3);--red:var(--ui-red);--hivis:var(--ui-accent);display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom)));overflow:hidden;background:var(--card);color:var(--ink);color-scheme:var(--ui-color-scheme);border:1px solid var(--line);border-radius:12px;overflow-wrap:anywhere}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sh{flex:none;padding:14px 14px 12px;background:var(--board);border-bottom:1px solid var(--line)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh :is(h2,.kk){padding-right:44px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh .kk{color:var(--ink2);font-weight:700}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh h2{font-size:20px;line-height:1.35;margin:4px 0}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh .s{font-size:12px;line-height:1.5;margin:6px 0 0}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh>.hint{font-size:12px;line-height:1.5;max-height:4.5em;overflow:auto;margin:6px 0 0}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .x{width:44px;height:44px;top:5px;right:5px}
 body:has(#chrome-app.mobile-shell) .planner-dialog-content{display:block;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scroll-padding:14px;-webkit-overflow-scrolling:touch}
 body:has(#chrome-app.mobile-shell) .planner-dialog-content>.f{padding:14px;min-width:0;overflow:visible}
 body:has(#chrome-app.mobile-shell) .planner-dialog-content>.f+.f{border-top:1px solid var(--line)}
 body:has(#chrome-app.mobile-shell) .planner-dialog-content>.note{margin:12px 14px 0;padding:10px;font-size:12px;line-height:1.5;white-space:normal}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(h3,.tw-day-projects>h3){margin:0 0 14px;padding:10px 12px;background:var(--board);border:1px solid var(--line);border-left:4px solid var(--ui-accent-border);border-radius:6px;font-size:12px;color:var(--ink);line-height:1.5}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.g2,.g3){grid-template-columns:minmax(0,1fr)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .fl{min-width:0;margin-bottom:14px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet label{font-size:12px;line-height:1.5;font-weight:650;color:var(--ink2);white-space:normal}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(input:not([type=checkbox]):not([type=radio]),select,textarea){min-width:0;width:100%;max-width:100%;min-height:44px;padding:9px;border:1px solid var(--line);border-radius:7px;background:var(--board);color:var(--ink);font:inherit;font-size:16px;box-sizing:border-box}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet textarea{min-height:90px;resize:vertical}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet input[type=checkbox]{width:20px;height:20px;flex:none;margin:0;accent-color:var(--ui-accent-border)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.tgl,.hour-overtime){display:flex;align-items:center;gap:8px;min-height:44px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.rowbtn,.hour-day-nav button){min-height:44px;padding:9px 10px;font-size:12px;line-height:1.4;white-space:normal}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(126px,1.2fr) minmax(0,1fr);gap:6px;margin:10px 0 0}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav input{width:100%;font-size:14px;padding:6px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav button:last-child{grid-column:1/-1;min-height:36px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sf{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid var(--line);background:var(--board)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sf>.sp{display:none}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sf>button{flex:1 1 90px;min-width:0;min-height:44px;padding:10px;font-size:13px;line-height:1.4;white-space:normal}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sf>.sv{background:var(--hivis);color:var(--ui-accent-ink);font-weight:750}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-overtime-help{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:12px;line-height:1.5;margin-bottom:14px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-overtime-help>span{flex:1 1 230px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-editor-scroll{max-width:100%;overflow:auto;touch-action:pan-x pan-y pinch-zoom}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.hour-editor-block.movable,.hour-editor-resize){touch-action:pan-x pan-y pinch-zoom}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-editor-help{display:block;white-space:normal;font-size:12px;line-height:1.5;padding:8px 0 14px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-list{display:grid;gap:14px;border:0;margin-top:4px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--card)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-kind{grid-column:1;grid-row:1;font-size:11px;font-weight:750;align-self:center;color:var(--ink)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>button{grid-column:2;grid-row:1;justify-self:end;width:44px;min-height:44px;border:1px solid var(--line);border-radius:7px;background:var(--board);font-size:23px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>div{grid-column:1/-1;min-width:0;display:grid;gap:12px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row label{display:grid;gap:5px;font-size:12px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row .hour-overtime{display:flex;grid-row:auto;grid-column:auto}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>input{grid-column:1/-1}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>b{font-size:14px;line-height:1.5;justify-self:start;align-self:center}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>b small{display:block;font-size:11px;color:var(--ink2)}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-add{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding-top:14px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-add>span{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.tw-day-projects,.tw-day-context){margin-top:20px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .tw-day-projects>p{font-size:12px;line-height:1.6}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .tw-day-options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .tw-task-choice{min-height:52px;padding:10px;white-space:normal;min-width:0;touch-action:pan-y}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.tw-task-choice b,.tw-task-choice span){white-space:normal;line-height:1.5}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .pd-scroll{max-height:60dvh;touch-action:pan-x pan-y pinch-zoom}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(button,input,select,textarea):focus-visible{outline:2px solid var(--ui-accent-border);outline-offset:2px}
}
@media screen and (min-width:600px){
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav{grid-template-columns:minmax(100px,1fr) 160px minmax(100px,1fr) 80px;max-width:650px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav button:last-child{grid-column:auto;min-height:44px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet :is(.g2,.g3){grid-template-columns:repeat(2,minmax(0,1fr))}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row{grid-template-columns:repeat(4,minmax(0,1fr))}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-kind{grid-column:1/4}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>button{grid-column:4}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-row>input{grid-column:1/-1}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-plan-add{grid-template-columns:repeat(5,minmax(0,1fr))}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .tw-day-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-height:500px){
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sh{padding:8px 14px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh h2{font-size:17px;margin:0}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh .kk{font-size:9px;margin:0}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .sh .s{font-size:11px;margin-top:4px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav{margin-top:6px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet>.sf{padding:6px 14px}
}

@media screen and (min-width:480px) and (max-width:599px) and (max-height:500px){
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr) 60px}
 body:has(#chrome-app.mobile-shell) .planner-form-sheet .hour-day-nav button:last-child{grid-column:auto;min-height:44px}
}