/* The computer layout. Only loads on a big screen with a mouse. */
html.desk{--desk-w:256px;--page:1040px}
html.desk,html.desk body{background:var(--base)}
html.desk .app{grid-template-columns:var(--desk-w) minmax(0,1fr)}
html.desk .app::after{display:none}
/* Sidebar */
html.desk .app>.nav{position:fixed!important;left:0;top:124px;width:var(--desk-w);height:auto;padding:0 12px!important;margin:0;background:none;border:0;box-shadow:none;display:flex;flex-direction:column;gap:2px;z-index:24}
html.desk body::before{content:'';position:fixed;left:0;top:0;bottom:0;width:var(--desk-w);background:color-mix(in srgb,var(--accent) 3.5%,var(--base));border-right:1px solid color-mix(in srgb,var(--ink) 6%,transparent);z-index:1}
html.desk .app>.top{width:var(--desk-w);z-index:25}
html.desk .app>.top .brand{left:18px;top:20px}
html.desk .app>.top .top-right{left:14px;bottom:16px}
html.desk .app>.nav .nav-button{min-height:38px;padding:0 10px;font-size:14.5px;border-radius:10px;gap:11px;justify-content:flex-start;background:none}
html.desk .app>.nav .nav-button.selected{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text,var(--accent));font-weight:600}
html.desk .app>.nav .nav-button:not(.selected):hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
html.desk .app>.nav .nav-button svg,html.desk .app>.nav .nav-button :is(img,.emo){width:19px;height:19px}
html.desk .app>.nav .nav-button[data-tab=today] :is(.badge,sup,b,[class*=badge],[class*=count]){display:none!important}
html.desk .desk-new{position:fixed;left:12px;top:74px;width:calc(var(--desk-w) - 24px);display:flex;gap:6px;z-index:25}
html.desk .desk-add{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:38px;border-radius:10px;color:#fff;font-size:14px;font-weight:600;background:linear-gradient(100deg,var(--g1),var(--g3));cursor:pointer}
html.desk .desk-add svg{width:16px;height:16px;stroke:currentColor}
html.desk .desk-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent);cursor:pointer}
html.desk .desk-icon svg{width:18px;height:18px}
html.desk .desk-icon:hover{background:color-mix(in srgb,var(--ink) 9%,transparent)}
html.desk .desk-mic{color:var(--accent-text,var(--accent))}
html.desk .desk-side{position:fixed;left:0;top:342px;bottom:64px;width:var(--desk-w);overflow-y:auto;padding:4px 12px 12px;box-sizing:border-box;z-index:24}
html.desk .desk-head{margin:14px 10px 4px;font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
html.desk .desk-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:32px;padding:0 10px;border-radius:9px;text-align:left;font-size:13.5px;color:var(--ink);cursor:pointer}
html.desk .desk-row-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.desk .desk-row-meta{flex:none;font-size:12px;color:var(--muted)}
html.desk .desk-row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}
html.desk .desk-row.on{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text,var(--accent));font-weight:600}
html.desk .desk-clock{position:fixed;left:12px;bottom:64px;width:calc(var(--desk-w) - 24px);display:flex;align-items:center;gap:10px;height:44px;padding:0 12px;border-radius:11px;color:#fff;background:var(--ink);z-index:26;cursor:pointer;text-align:left}
html.desk .desk-clock[hidden]{display:none}
html.desk .desk-clock-time{font-variant-numeric:tabular-nums;font-weight:600;font-size:15px}
html.desk .desk-clock-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;opacity:.75}
/* No floating buttons here: the sidebar does their job. They stay in the page, invisible, for menus and shortcuts. */
html.desk .fab,html.desk #talkFab{opacity:0!important;pointer-events:none!important}
html.desk #listNew{display:none!important}
/* Pages: one width, tools beside the title. */
html.desk .app>#viewScroll{grid-column:2;grid-row:1;padding-top:40px;padding-bottom:60px}
html.desk .app>#viewScroll>*{max-width:var(--page);margin-left:auto;margin-right:auto;padding-left:40px;padding-right:40px;box-sizing:border-box}
html.desk .hello h1{font-size:34px;line-height:1.15}
html.desk .hello{margin-bottom:14px}
html.desk #todayBody>.seg.range{max-width:380px;margin-bottom:12px}
html.desk #todayBody>.idea{margin-bottom:10px}
/* An open list is a single, centred column with its tools on the title line. */
html.desk #tasksView:has(button#listPick){max-width:800px!important;position:relative}
html.desk #tasksView:has(button#listPick) #taskList{columns:auto!important}
html.desk #tasksView:has(button#listPick) .task-tools{position:absolute;top:12px;right:40px;margin:0}
/* The ⋯ is always there on anything with options. */
html.desk .row-more{opacity:.55!important;right:40px;background:none}
html.desk .row-more:hover{opacity:1!important}
html.desk :is(.today-copy,.trow-open){padding-right:44px}
html.desk .list-block>.row-more{right:62px;top:21px}
html.desk .list-block:has(.log-head)>.row-more{right:108px;top:26px}
html.desk :is(.log-head .side-meta){margin-right:36px}
/* Focus */
html.desk .app>#viewScroll>#focusView{max-width:720px;min-height:calc(100dvh - 110px);display:flex;flex-direction:column;justify-content:center}
html.desk #focusScope{max-width:420px;margin-left:auto;margin-right:auto}
html.desk .app>#viewScroll>#notesView{max-width:800px}
html.desk #noteForm button[type=submit]{width:auto;min-width:160px;padding-left:24px;padding-right:24px}
/* While a task's full screen, the sidebar steps aside. */
html.imm-on.desk :is(.desk-new,.desk-side,.desk-clock),html.imm-on.desk body::before{display:none}
html.desk .app>.top,html.desk .app>.top::before,html.desk .app>.top::after{background:none!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.desk .desk-search{position:fixed;left:12px;top:338px;width:calc(var(--desk-w) - 24px);height:34px;box-sizing:border-box;padding:0 10px;border-radius:9px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);background:var(--base);color:var(--ink);font:inherit;font-size:13.5px;z-index:25}
html.desk .desk-search:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:0}
html.desk .desk-side{top:376px}
html.desk .desk-head:first-child{margin-top:6px}
html.desk .row-more{opacity:.7!important}
html.desk #tasksView:has(button#listPick) .task-tools{top:20px}
html.desk #taskList>.list-sec{margin-bottom:18px}
html.desk #taskList .list-section{margin-top:0}
html.desk .desk-side::-webkit-scrollbar{width:0}
html.desk .desk-search{height:34px!important;min-height:0!important;box-shadow:none!important;margin:0}
html.desk{--page:1140px}
/* Focus while you set up: the circle on the left, the clock and controls beside it, all centred and big. */
html.desk .app>#viewScroll>#focusView{max-width:1120px;width:100%}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard.focus{display:grid;grid-template-columns:auto minmax(380px,auto);column-gap:64px;row-gap:0;justify-content:center;align-items:center;width:100%;max-width:none}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>:is(#focusScope,.mission,.pager){grid-column:1/-1;justify-self:center;width:min(720px,100%)}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>#focusScope{width:420px;margin-bottom:10px}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>.pager{margin-bottom:26px}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>#timerRing{grid-column:1;grid-row:4/8;--size:min(50dvh,460px)!important;margin:0}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>.run-clock{grid-column:2;grid-row:4;align-self:end;margin:0;text-align:center}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard #runClockTime{font-size:112px!important;line-height:1.05}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>#sceneHint{display:none}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>.controls{grid-column:2;grid-row:5;margin:14px 0 6px;justify-content:center;gap:22px}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>.focus-extras{grid-column:2;grid-row:6;align-self:start;margin:12px 0 0;justify-content:center}
html.desk #focusCard .controls .play{width:84px;height:84px}
html.desk #focusCard .controls .round{width:58px;height:58px}
/* Focus running without a painting: full screen, circle and clock side by side in the middle. */
html.desk:has(.app.focusing) body::before,html.desk:has(.app.focusing) :is(.desk-new,.desk-side,.desk-search,.desk-clock){display:none}
html.desk .app.focusing{grid-template-columns:minmax(0,1fr)!important}
html.desk .app.focusing>#viewScroll{grid-column:1;padding:0}
html.desk .app.focusing>#viewScroll>#focusView{max-width:none;min-height:100dvh;padding:0}
html.desk .app.focusing:not(.pomo) #focusCard.focus{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:88px;row-gap:0;justify-content:center;align-content:center;align-items:center;width:100%;max-width:none;min-height:100dvh}
html.desk .app.focusing:not(.pomo) #focusCard>#timerRing{grid-column:1;grid-row:1/3;--size:min(64dvh,600px)!important;margin:0}
html.desk .app.focusing:not(.pomo) #focusCard>.run-clock{grid-column:2;grid-row:1;align-self:end;margin:0;text-align:center}
html.desk .app.focusing:not(.pomo) #focusCard #runClockTime{font-size:clamp(100px,10vw,156px)!important;line-height:1.05}
html.desk .app.focusing:not(.pomo) #focusCard #runClockTask{font-size:21px}
html.desk .app.focusing:not(.pomo) #focusCard>.focus-extras{grid-column:2;grid-row:2;align-self:start;margin:26px 0 0;justify-content:center;gap:18px}
html.desk .app.focusing:not(.pomo) #focusCard>.focus-extras button{width:60px;height:60px}
html.desk .app.focusing:not(.pomo) #focusCard>.controls{grid-column:2;grid-row:2;align-self:start;justify-content:center}
/* Progress: its own page. */
html.desk dialog#recapDialog.sheet[open]{position:fixed;inset:0 0 0 var(--desk-w);margin:0;width:auto;max-width:none;height:auto;max-height:none;border-radius:0;box-shadow:none;background:var(--base);padding:40px max(40px,calc((100vw - var(--desk-w) - 1060px)/2)) 60px;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-content:start;z-index:20;animation:none}
html.desk #recapDialog::backdrop{background:none}
html.desk #recapDialog>.grip{display:none}
html.desk #recapDialog>.sheet-head{grid-column:1;grid-row:1;margin:0}
html.desk #recapDialog>.sheet-head h2{font-size:34px}
html.desk #recapDialog>.sheet-head .close{display:none}
html.desk #recapDialog>.seg{grid-column:2;grid-row:1;align-self:center;justify-self:end;width:380px;margin:0}
html.desk #recapDialog>.stats{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:22px 0}
html.desk #recapDialog .stat strong{font-size:40px}
html.desk #recapDialog>.trend{grid-column:1;grid-row:3;margin:0}
html.desk #recapDialog>.mix{grid-column:2;grid-row:3;margin:0}
html.desk #recapDialog>h3:nth-of-type(1){grid-column:1;grid-row:4;margin-top:26px}
html.desk #recapDialog>#recapTasks{grid-column:1;grid-row:5}
html.desk #recapDialog>h3:nth-of-type(2){grid-column:2;grid-row:4;margin-top:26px}
html.desk #recapDialog>#recapNotes{grid-column:2;grid-row:5}
html.desk #recapDialog>#copyRecap{grid-column:1;grid-row:6;justify-self:start;width:auto;padding:0 22px;margin-top:22px}
html.desk #recapDialog>#closeRecap{display:none}
/* Mouse drag */
html.desk :is(.today-task,.r-item).dragging-row{cursor:grabbing}
/* Tighter rows, as a computer can be precise. */
html.desk .routine-card,html.desk .today-list{border-radius:14px}
html.desk .today-task{min-height:48px}
html.desk .today-task>.today-emo{width:30px;height:30px}
html.desk .today-task>.today-emo :is(.emo,img){width:18px;height:18px}
html.desk .today-task .today-copy strong{font-size:14.5px}
html.desk .today-task .today-copy small{font-size:12.5px}

/* Round two after looking at it */
html.desk #focusCard>.controls{margin-bottom:44px!important}
html.desk .app:not(.focusing):not(.pomo):not(.pomo-run) #focusCard>.focus-extras{margin-top:0}
html.desk .desk-pause{display:none}
html.desk .app.focusing:not(.pomo) .desk-pause{display:grid;place-items:center;border-radius:50%;color:#f4f2fb;background:rgba(255,255,255,.08)}
html.desk .app.focusing:not(.pomo) #focusCard>.focus-extras button{width:60px!important;height:60px!important;margin:0!important;background:rgba(255,255,255,.08);border-radius:50%;color:#f4f2fb}
html.desk .app.focusing:not(.pomo) #focusCard>.focus-extras :is(svg,.emo){width:26px!important;height:26px!important}
html.desk .app.focusing:not(.pomo) #focusCard>.focus-extras{position:static}
html.desk .app.focusing:not(.pomo) #focusCard>.focus-extras #soundPick{position:static;transform:none}
html.desk .desk-search{top:380px}
html.desk #recapDialog[open] .stats .stat{grid-column:auto!important;display:flex;align-items:center;gap:12px;padding:18px 20px;min-height:84px;flex-wrap:wrap}
html.desk #recapDialog>.trend:has(+.mix[hidden]){grid-column:1/-1}
html.desk:has(#recapDialog[open]) .app>.nav .nav-button.selected{background:none;color:inherit;font-weight:inherit}
html.desk:has(#recapDialog[open]) .app>.nav .desk-progress{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent-text,var(--accent));font-weight:600}
html.desk #openRecap{display:none!important}
html.desk .desk-side{top:418px}
html.desk .app>.nav .nav-button.selected{background:color-mix(in srgb,var(--accent) 12%,transparent)!important}
html.desk:has(#recapDialog[open]) .app>.nav .nav-button.selected{background:none!important;color:var(--ink)!important;font-weight:500}
html.desk:has(#recapDialog[open]) .app>.nav .nav-button.selected svg{color:inherit}
html.desk:has(#recapDialog[open]) .app>.nav .desk-progress{background:color-mix(in srgb,var(--accent) 12%,transparent)!important;color:var(--accent-text,var(--accent))!important}
html.desk #recapScore{margin-left:auto}
/* Pomodoro running: same side-by-side layout, controls always there, nothing to tap to reveal. */
html.desk .app.pomo-run #focusCard.focus{display:grid;grid-template-columns:auto minmax(420px,auto);grid-template-rows:1fr repeat(5,auto) 1fr;column-gap:88px;justify-content:center;align-items:center;width:100%;max-width:none;min-height:100dvh}
html.desk .app.pomo-run #focusCard>#timerRing{grid-column:1;grid-row:1/-1;--size:min(64dvh,600px)!important;margin:0}
html.desk .app.pomo-run #focusCard>#pomoRound{grid-column:2;grid-row:2;margin:0 0 6px;text-align:center;position:static}
html.desk .app.pomo-run #focusCard>.run-clock{grid-column:2;grid-row:3;margin:0;text-align:center;opacity:1;transform:none}
html.desk .app.pomo-run #focusCard #runClockTime{font-size:clamp(100px,10vw,156px)!important;line-height:1.05}
html.desk .app.pomo-run #focusCard #runClockTask{font-size:21px}
html.desk .app.pomo-run #focusCard>:is(#pomoBreath,#pomoBreakLine){grid-column:2;grid-row:4;margin:14px 0 0;text-align:center}
html.desk .app.pomo-run #focusCard>#pomoHint{display:none!important}
html.desk .app.pomo-run #focusCard>#pomoControls{grid-column:2;grid-row:5;margin:26px 0 44px!important;justify-content:center;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;max-height:none!important}
html.desk .app.pomo-run #focusCard>.focus-extras{grid-column:2;grid-row:6;margin:0;position:static;justify-content:center;gap:18px}
html.desk .app.pomo-run #focusCard>.focus-extras button{position:static!important;transform:none!important;width:60px!important;height:60px!important;margin:0!important;background:rgba(255,255,255,.08);border-radius:50%;color:#f4f2fb}
html.desk .app.pomo-run #focusCard>.focus-extras :is(svg,.emo){width:26px!important;height:26px!important}
html.desk .app.pomo-run #pomoStage .pomo-read{display:none}
html.desk .app.pomo-run #focusCard>#pomoBreath{display:none!important}
html.desk .app.pomo-run #focusCard>#pomoBreakLine{color:#c9c5dc;font-size:17px}
html.desk .app.pomo-run #focusCard>.run-clock{display:grid!important;justify-items:center;gap:4px}
html.desk .app.pomo-run #focusCard>.focus-extras #scenePill{width:auto!important;padding:0 20px;border-radius:30px;font-size:14px;color:#f4f2fb;opacity:1}
html.desk .app.pomo-run #pomoControls .round{background:rgba(255,255,255,.08);color:#f4f2fb}
html.desk .app.pomo-run #pomoControls .cap{color:#c9c5dc}
html.desk .app.pomo-run.pomo-brk #runClockTask{display:none}