html body .app-time-picker{position:fixed;inset:auto;margin:0;box-sizing:border-box;display:grid;grid-template-columns:116px minmax(0,1fr);width:min(660px,calc(100vw - 20px));max-height:calc(100dvh - 20px);overflow:auto;padding:0;border:1px solid #d8e0da;border-radius:8px;background:#fff;color:#303a33;box-shadow:0 18px 42px #1c2d3333;font:400 11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;z-index:2400}
html body .app-time-picker[hidden]{display:none!important}
html body .app-time-picker button{box-sizing:border-box;min-width:0;width:auto;margin:0;padding:0;border:0;outline:none;box-shadow:none;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:11px;font-weight:400;line-height:1.5;cursor:pointer}
html body .app-time-presets{display:grid;align-content:start;padding:8px;border-right:1px solid #e3e9e4;background:#fbfcfb;max-height:420px;overflow:auto}
html body .app-time-presets .app-time-preset{min-height:32px;padding:6px 8px;text-align:left;white-space:normal}
html body .app-time-picker button:hover,html body .app-time-picker button:focus-visible{background:#edf7f0;color:#137c3f}
html body .app-time-calendar{min-width:0;padding:8px 10px 12px}
html body .app-time-nav{display:grid;grid-template-columns:28px 28px minmax(0,1fr) 28px 28px;align-items:center;gap:3px;margin-bottom:5px}
html body .app-time-nav-label{text-align:center}
html body .app-time-nav .app-time-shift{height:30px;font-size:18px}
html body .app-time-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
html body .app-time-month{min-width:0}
html body .app-time-month h4{margin:0 0 7px;color:#202a23;font:inherit;font-size:11px;font-weight:400;line-height:1.5;text-align:center}
html body .app-time-week,html body .app-time-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
html body .app-time-week span{display:grid;place-items:center;height:25px;color:#737d76}
html body .app-time-days .app-time-day{display:grid;place-items:center;aspect-ratio:1;background:#f6f8f6}
html body .app-time-days .in-range{border-radius:0;background:#eaf4ed;color:#176d3a}
html body .app-time-days :is(.range-start,.range-end){background:var(--app-green, #078966);color:#fff}
html body .app-time-picker button:disabled{opacity:.3;cursor:default}
html body .app-time-footer{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px;border-top:1px solid #e3e9e4}
html body .app-time-inputs{display:flex;min-width:0;gap:8px;flex:1}
html body .app-time-input{box-sizing:border-box;width:132px;min-width:0;max-width:100%;height:32px;padding:4px;border:0!important;outline:0!important;box-shadow:none!important;background:#f6f8f6;color:#303a33;font:inherit;font-size:11px;font-weight:400;line-height:1.5}
html body .app-time-actions{display:flex;gap:6px}
html body .app-time-actions button{height:32px;min-width:48px;padding:0 8px;border:1px solid #d8e0da}
html body .app-time-actions .app-time-confirm{color:#176d57;background:#edf7f0}
html body .app-time-error{width:100%;color:#b42323}
html body .app-time-error:empty{display:none}
html body .app-time-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important}
html body .app-time-trigger{box-sizing:border-box;min-width:0;max-width:100%;height:36px;padding:0 8px;border:1px solid var(--app-line, #c9ddd1)!important;border-radius:5px;background:#fff;color:#344054;font:inherit;font-size:11px;font-weight:400;line-height:1.5;outline:0!important;box-shadow:none!important;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body .app-time-trigger[hidden]{display:none!important}
@media(max-width:800px){html body .app-time-picker{grid-template-columns:minmax(0,1fr)}html body .app-time-presets{grid-template-columns:repeat(3,minmax(0,1fr));max-height:150px;border-right:0;border-bottom:1px solid #e3e9e4}html body .app-time-picker .app-time-preset{padding:5px;text-align:left}html body .app-time-months{grid-template-columns:minmax(0,1fr)}html body .app-time-month+.app-time-month{display:none}html body .app-time-input{font-size:16px!important;width:calc(50% - 4px);height:36px}html body .app-time-inputs{flex-basis:100%}html body .app-time-actions{margin-left:auto}}

html body .app-time-mobile-native,html body .app-time-overview-mobile{display:none!important}
@media(max-width:800px){html body .app-time-overview-mobile{display:block!important;width:100%}html body.dashboard-home .period-toolbar .period-custom{display:none!important}}

/* Date filters share the dropdown frame; phones retain the touch wheel. */
html:root body .app-time-picker { grid-template-columns:92px minmax(0,1fr); border-color:var(--app-line-soft,#e2ede5); border-radius:5px; background:#fff; color:var(--app-ink,#203129); box-shadow:0 10px 26px #24324b22; font-size:11px; }
html:root body .app-time-picker::backdrop { background:transparent; }
html:root body .app-time-head { grid-column:1/-1; display:flex; align-items:center; justify-content:flex-start; position:relative; min-height:34px; padding:6px 36px 6px 12px; border-bottom:1px solid var(--app-line-soft,#e2ede5); color:var(--app-muted,#586c60); font-size:11px; font-weight:400; }
html:root body .app-time-head .app-time-close { position:absolute; right:10px; display:grid; place-items:center; width:28px!important; height:28px!important; min-height:0!important; padding:0!important; color:var(--app-muted,#586c60); font-size:22px!important; }
html:root body .app-time-picker .app-time-day { height:28px!important; min-height:0!important; aspect-ratio:auto!important; padding:0!important; font-size:11px!important; background:transparent; }
html:root body .app-time-picker .app-time-preset { min-height:28px!important; padding:5px 6px!important; font-size:11px!important; }
html:root body .app-time-picker .app-time-clear { display:none; }
html:root body .app-time-actions .app-time-confirm { border-color:var(--app-green,#078966)!important; background:#fff!important; color:var(--app-green,#078966)!important; }
html:root body .app-time-picker .app-time-input { border:0!important; outline:0!important; box-shadow:none!important; }
@media(max-width:800px) {
 html:root body .app-time-picker::backdrop { background:rgba(14,33,23,.22); }
 html:root body .app-time-picker { display:flex; flex-direction:column; max-width:480px; overflow:auto; }
 html:root body .app-time-head { flex:none; }
 html:root body .app-time-calendar { display:none!important; }
 html:root body .app-time-presets { flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; padding:6px 12px; max-height:102px; border-bottom:0; background:#fff; }
 html:root body .app-time-inputs { flex:none; display:flex; align-items:center; padding:8px 14px; gap:8px; }
 html:root body .app-time-input { width:0; flex:1; height:36px; padding:6px!important; border-radius:6px; background:#f5f6f5; font-size:16px!important; text-align:center; cursor:pointer; }
 html:root body .app-time-input.is-current { color:var(--app-green,#078966); background:var(--app-hover,#eff9f6); }
 html:root body .app-time-range-separator { flex:none; color:#818b85; font-size:11px; }
 html:root body .app-time-wheels { flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:relative; height:180px; margin:4px 12px 10px; }
 html:root body .app-time-wheels::before { position:absolute; z-index:0; top:72px; right:0; left:0; height:36px; border-radius:6px; background:#f3f5f4; content:''; pointer-events:none; }
 html:root body .app-time-wheel-column { position:relative; min-width:0; height:180px; padding:72px 0; box-sizing:border-box; overflow-y:auto; scrollbar-width:none; scroll-snap-type:y mandatory; overscroll-behavior:contain; touch-action:pan-y; }
 html:root body .app-time-wheel-column::-webkit-scrollbar { display:none; }
 html:root body .app-time-wheel-column .app-time-wheel-option { display:block!important; width:100%!important; height:36px!important; min-height:36px!important; margin:0!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:#949c97!important; font-size:14px!important; line-height:36px!important; text-align:center!important; scroll-snap-align:center; }
 html:root body .app-time-wheel-column .app-time-wheel-option[aria-selected=true] { color:#172635!important; }
 html:root body .app-time-wheel-column .app-time-wheel-option:is(:focus-visible,:hover) { color:var(--app-green,#078966)!important; }
 html:root body .app-time-footer { flex:none; display:block; position:sticky; bottom:0; padding:10px 14px 14px; border-top:0; background:#fff; }
 html:root body .app-time-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 html:root body .app-time-actions :is(.app-time-clear,.app-time-confirm) { display:block; width:100%!important; height:36px!important; min-height:36px!important; padding:0 10px!important; border-radius:5px!important; font-size:11px!important; }
 html:root body .app-time-actions .app-time-cancel { display:none!important; }
}

/* The date grid stays quiet until hovered or selected, like the option list. */
html:root body .app-time-picker .app-time-calendar { padding:6px 8px 8px; }
html:root body .app-time-picker .app-time-months { gap:8px; }
html:root body .app-time-picker .app-time-week span { height:22px; color:var(--app-muted,#586c60); }
html:root body .app-time-picker .app-time-day:is(:hover,:focus-visible),
html:root body .app-time-picker .app-time-preset:is(:hover,:focus-visible) { color:var(--app-green,#078966); background:var(--app-hover,#eff7f1); }
html:root body .app-time-picker .app-time-day:focus-visible { outline:1px solid var(--app-green,#078966); outline-offset:-1px; }
html:root body .app-time-picker .app-time-day.in-range { border-radius:0; background:var(--app-hover,#eff7f1); color:var(--app-green,#078966); }
html:root body .app-time-picker .app-time-day:is(.range-start,.range-end) { background:var(--app-green,#078966); color:#fff; }
html:root body .app-time-presets { background:#fff; border-color:var(--app-line-soft,#e2ede5); }
html:root body .app-time-picker .app-time-month h4 { color:var(--app-ink,#203129); }
html:root body .app-time-footer { border-color:var(--app-line-soft,#e2ede5); padding:8px 10px; }
html:root body .app-time-actions button { border-color:var(--app-line,#c9ddd1); border-radius:4px; background:#fff; color:var(--app-ink,#203129); }
html:root body .app-time-picker .app-time-input { background:var(--app-subtle,#f5f9f6); color:var(--app-ink,#203129); }
@media(max-width:800px) {
 html:root body .app-time-footer { padding:10px 14px 14px; }
 html:root body .app-time-actions .app-time-confirm { background:var(--app-green,#078966)!important; color:#fff!important; }
}

/* Formal review periods are full-width choices, with their own scroll area. */
html:root body .app-time-period-picker { display:flex; flex-direction:column; overflow:hidden; }
html:root body .app-time-period-picker .app-time-head { flex:none; }
html:root body .app-time-period-list { min-height:0; max-height:min(420px,calc(100dvh - 110px)); padding:6px; overflow-y:auto; overscroll-behavior:contain; }
html:root body .app-time-period-picker .app-time-period-option { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%!important; height:auto!important; min-height:44px!important; padding:10px 12px!important; text-align:left; white-space:nowrap; }
html:root body .app-time-period-option[aria-pressed=true] { color:var(--app-green,#078966); background:var(--app-hover,#eff7f1); }
html:root body .app-time-period-option:focus-visible { outline:1px solid var(--app-green,#078966); outline-offset:-1px; }
html:root body .app-time-period-state { flex:none; color:var(--app-muted,#586c60); font-size:11px; }
html:root body .app-time-period-empty { padding:12px; color:var(--app-muted,#586c60); }
html:root body .app-time-period-picker .app-time-error:not(:empty) { box-sizing:border-box; padding:8px 12px; }

/* Unified review offers single days and existing stages in one panel. */
html:root body .app-time-extra-periods{grid-column:1/-1;min-width:0;border-top:1px solid var(--app-line-soft,#e2ede5)}
html:root body .app-time-extra-periods h4{margin:8px 12px 0;font:inherit;color:var(--app-muted,#586c60)}
html:root body .app-time-extra-periods .app-time-period-list{max-height:144px;padding:4px 8px}
html:root body .app-time-extra-periods .app-time-period-option{display:block;width:100%!important;min-height:36px;padding:8px!important;text-align:left;white-space:nowrap}

/* Period choices follow the time trigger, including on touch screens. */
html:root body .app-time-period-picker::backdrop{background:transparent;}

/* Date dropdown lists share the same full-row treatment as other menus. */
html:root body .app-time-picker { border:1px solid #dce8e2; border-radius:0; box-shadow:0 12px 32px #163b291f,0 2px 6px #163b2908; }
html:root body .app-time-picker :is(.app-time-presets,.app-time-period-list) { padding:0; }
html:root body .app-time-picker :is(.app-time-preset,.app-time-period-option) { box-sizing:border-box; border-radius:0; padding-inline:12px !important; transition:background-color .15s ease,color .15s ease; }
html:root body .app-time-picker :is(.app-time-preset,.app-time-period-option):is(:hover,:focus-visible):not(:disabled) { background:var(--app-menu-hover,#f0f8f3); color:var(--app-menu-accent,#087952); }
html:root body .app-time-picker :is(.app-time-preset,.app-time-period-option)[aria-pressed="true"] { background:var(--app-menu-selected,#e1f2e7); color:var(--app-menu-accent,#087952); box-shadow:inset 2px 0 var(--app-menu-accent,#087952); }
html:root body .app-time-picker :is(.app-time-preset,.app-time-period-option)[aria-pressed="true"]:is(:hover,:focus-visible) { background:var(--app-menu-selected-hover,#d5ecdf); }
@media(max-width:800px) { html:root body .app-time-picker .app-time-presets { padding:0; gap:4px; } }
@media(prefers-reduced-motion:reduce) { html:root body .app-time-picker :is(.app-time-preset,.app-time-period-option) { transition:none; } }