/* budd — the desktop, and every width in between (round 11 · Bud/studio/r11/SPEC-desktop.md)
   LOADED FROM 600 PX UP ONLY (index.html gives it a media query), so nothing here can touch the phone below 600.
   js/desk.js marks the body:  data-size = tablet | side | laptop | desk  ·  data-desk = bench | column | deck (from 1024)  ·
   data-open while the panel has grown over bud's stage  ·  data-cols = how many columns help shows.
   Every distance below is one of the tokens; desk.js reads the same tokens to place bud. */

/* ================================================================ TOKENS */
:root{
  --gutter:24px;                                                  /* window edge to the blocks, and between them */
  --sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px;--sp6:32px;--sp7:48px;   /* the one spacing scale */
  /* ROUND 13: the type scale lives in css/app.css and nowhere else. This file used to declare its own
     --fs-* in px, which from 600 px up quietly replaced the app's. It reads them now, it never sets them.
     The control ladder is the app's too (36 · 44 · 52 · 60 · 64); only --ctl-desk is this file's own. */
  --ctl-desk:36px;                                                /* the desktop's smaller circles */
  --rail:0px;--panel:0px;--panel-ci:0px;--port:120px;--col:430px;--shelf:260px;--list:340px;--read:720px;
  --pad:var(--sp5);                                               /* inside the panel */
  --ease:cubic-bezier(.2,.9,.25,1);
}
@media (min-width:1024px){ :root{--rail:88px;--panel:420px;--panel-ci:560px;--shelf:250px;--list:340px;--deck-split:40vw} }
@media (min-width:1280px){ :root{--panel-ci:600px;--shelf:280px;--list:360px;--deck-split:50vw} }
@media (min-width:1440px){ :root{--gutter:32px;--rail:200px;--panel:520px;--panel-ci:660px;--shelf:300px;--list:380px;--pad:28px} }
@media (min-width:1680px){ :root{--panel-ci:720px;--shelf:340px} }

/* ---------------------------------------------------------------- ROUND 18 · A PANEL PER TAB
   His words: "check in is better now but it doesnt always have to be this sort of biig window ...
   for all other windows where there isnt so much info (like personal or something) the window
   doesnt have to be as big. then you can show bud on the left ... bud is almost everywhere kinda
   visible on desktop except for learn where the infographics take up a lot of space instead."
   So the panel is no longer one width for everything. Each tab asks for the room it needs, and
   everything it does not take goes to bud, who is measured from the column that is left. */
@media (min-width:1024px){
  body[data-desk=bench][data-tab=you]{--panel:min(400px,38vw)}          /* the pass, and nothing else */
  body[data-desk=bench][data-tab=buddies]{--panel:min(470px,42vw)}      /* letters, one column */
  body[data-desk=bench][data-tab=herbarium]{--panel:min(640px,52vw)}    /* a month wants its seven columns */
  body[data-desk=bench][data-tab=help]{--panel:min(960px,66vw)}         /* three columns of their own */
  body[data-desk=bench][data-tab=learn]{--panel:min(1100px,74vw)}       /* his note: here the pictures take the room, and bud steps out */
  /* settings is the one half of you that needs width, so it asks for its own */
  body[data-desk=bench][data-tab=you][data-ypart=set]{--panel:min(900px,66vw)}
}
/* where bud has stepped out and the panel has taken the room, his line and his pill go with him */
body[data-desk][data-tab=learn] #stfoot,body[data-desk][data-tab=learn] #home .foot{display:none}
/* learn's list is two columns when there is room for two */
@media (min-width:1024px){ body[data-desk] #learn .lidx{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:10px} }

#dkshell{display:contents}
#dkshell > *{display:none}
#dkshell > [hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------------------------------------------------------------- pointer: rows show their arrow, buttons lift, icon buttons say their name */
@media (hover:hover) and (pointer:fine){
  .cta,.gbtn,.chip,.circ,.lrow,.pcard,.lcard,.plc,.pg,.hrow{transition:transform .18s var(--ease),box-shadow .2s,background .2s}
  .cta:hover,.gbtn:hover,.circ:hover,.pg:hover{transform:translateY(-1px)}
  .chip:hover{box-shadow:inset 0 0 0 1px var(--soft)}
  .lrow > .ic,.pcard > .ic,.plc > .ic,.hrow .call,.lcard .ln .ic,.srow .go{transition:opacity .2s,transform .2s var(--ease)}
  body[data-desk] .lrow:not(:hover):not(:focus-visible) > .ic,body[data-desk] .pcard:not(:hover):not(:focus-visible) > .ic,
  body[data-desk] .plc:not(:hover):not(:focus-visible) > .ic{opacity:0;transform:translateX(-4px)}
  .lrow:hover,.pcard:hover,.plc:hover,.lcard:hover{transform:translateY(-1px)}
}
#tip{display:block;position:fixed;z-index:2147483640;pointer-events:none;padding:6px 10px;border-radius:12px;background:var(--cta);color:var(--cta-ink);font-family:var(--f-data);font-size:var(--fs-data);white-space:nowrap;opacity:0;transform:translateY(2px);transition:opacity .15s,transform .15s}
#tip.on{opacity:1;transform:none}

/* ================================================================ TABLET · 600–1023, taller than 500
   the phone column, centred (540), a larger bud, the tab pill at the bottom, two columns inside lists */
body[data-size=tablet] .screen{padding-left:calc(50vw - 270px);padding-right:calc(50vw - 270px)}
body[data-size=tablet] #home .foot{left:calc(50vw - 270px);right:calc(50vw - 270px)}
body[data-size=tablet] #tabs{left:calc(50vw - 282px);right:calc(50vw - 282px)}
body[data-size=tablet] #sheet{left:calc(50vw - 280px);right:calc(50vw - 280px)}   /* never a bottom sheet wider than 560 */
body[data-size=tablet] .herb{grid-template-columns:repeat(3,minmax(0,1fr))}
body[data-size=tablet] .lidx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-size=tablet] .lidx .lrow{align-items:flex-start}
body[data-size=tablet] .plans[data-lay=cards]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-size=tablet] .plans[data-lay=cards] .pcard{padding:12px 14px 12px 10px;gap:12px}
body[data-size=tablet] .plans[data-lay=cards] .pcard .pb .thumb{width:72px !important;height:72px !important}
body[data-size=tablet] .avatar-space{height:300px}

/* ================================================================ A PHONE ON ITS SIDE · 600–1023, 500 tall or less
   a small bench: bud on the left, the content in a column on the right with its tab pill at the foot */
body[data-size=side]{--sidew:clamp(340px,54vw,520px)}
body[data-size=side] .screen{left:auto;right:0;width:calc(var(--sidew) + var(--gutter));padding:calc(12px + var(--sat)) var(--gutter) calc(84px + var(--sab)) 4px}
body[data-size=side] #tabs{left:auto;right:var(--gutter);width:var(--sidew);bottom:calc(10px + var(--sab));height:58px}
body[data-size=side] #tabs .t{height:48px;font-size:var(--fs-micro);gap:3px}
body[data-size=side] #tabs .t i{width:20px;height:20px}
body[data-size=side] #sheet{left:auto;right:10px;width:calc(var(--sidew) + 14px);bottom:10px;max-height:calc(100% - 20px);overflow-y:auto;padding:16px 18px 14px}
body[data-size=side] #home .foot{left:4px;right:var(--gutter);bottom:calc(80px + var(--sab))}
body[data-size=side] .avatar-space{display:none}
body[data-size=side] #toast{left:calc(100vw - var(--gutter) - var(--sidew) / 2)}
body[data-size=side] #resume{left:calc(100vw - var(--gutter) - var(--sidew) / 2);bottom:calc(78px + var(--sab))}
body[data-size=side] .bodymap svg{max-height:46vh}
body[data-size=side] #sheet .words{max-height:150px}

/* ================================================================ THE SHELLS, shared (1024 and up) */
body[data-desk] #dn,body[data-desk] #me{display:grid;position:fixed;z-index:30}
body[data-desk] #home .top > .circ,body[data-desk] #buddies .head .top > .circ[data-go=you]{display:none}
body[data-desk=column] #home .top > .circ{display:grid}   /* the column keeps the phone's own corners */
body[data-desk=column] #dn,body[data-desk=column] #me{display:none}
body.breathing #dkshell > *,body.drying #dkshell > *{opacity:0 !important;pointer-events:none !important}
/* round 13: "right now · 142" is gone from the rail's foot; the numbers live in help. */
/* inside a glass panel a card is a lighter card, never a second blur */
body[data-desk=bench] .screen .glass,body[data-desk=deck] #screens .screen:not(#home) .glass{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair)}
body[data-desk=bench] .desk-only,body[data-desk=deck] .desk-only{display:block}
body[data-desk=bench] .phone-only,body[data-desk=deck] .phone-only{display:none !important}
body[data-desk=bench] .det .hero.phone-only,body[data-desk=deck] .det .hero.phone-only{display:block !important;width:min(100%,300px)}
body[data-desk=bench] [data-act=relive],body[data-desk=deck] [data-act=relive]{display:none !important}
body[data-desk] .avatar-space{display:none}

/* ================================================================ A · THE BENCH
   a slim rail (night on top, the five tabs, right now at the foot) · bud's stage in the middle · the panel on the right.
   Opened from the panel, the panel grows over the stage and bud moves into the porthole. */
body[data-desk=bench] #pane{display:block;position:fixed;z-index:9;top:var(--gutter);bottom:var(--gutter);left:calc(100vw - var(--gutter) - var(--panel));width:var(--panel);
  border-radius:var(--r-win);background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
  box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade);transition:left .5s var(--ease),width .5s var(--ease),opacity .35s}
body[data-desk=bench][data-open] #pane{left:calc(var(--gutter) * 2 + var(--rail));width:calc(100vw - var(--gutter) * 3 - var(--rail))}
body[data-desk=bench].ci #pane{opacity:0}
/* the screens sit in the panel */
body[data-desk=bench] .screen{left:calc(100vw - var(--gutter) - var(--panel));width:var(--panel);right:auto;top:var(--gutter);bottom:var(--gutter);border-radius:var(--r-win);
  padding:var(--pad) var(--pad) var(--sp6);transition:opacity .35s ease,transform .45s var(--ease),left .5s var(--ease),width .5s var(--ease),padding .5s var(--ease)}
body[data-desk=bench][data-open] .screen{left:calc(var(--gutter) * 2 + var(--rail));width:calc(100vw - var(--gutter) * 3 - var(--rail))}
/* round 13: the column that used to be kept clear for the porthole is only kept when the porthole is on */
body[data-desk=bench][data-open][data-port] .screen{padding-left:calc(var(--port) + 40px)}
body[data-desk=bench].ci .screen{visibility:hidden;opacity:0}
/* the person circle at the panel's top right; the heads that reach that corner leave it room */
body[data-desk=bench] #me{top:calc(var(--gutter) + var(--pad) - 6px);right:calc(var(--gutter) + var(--pad) - 6px)}
body[data-desk=bench].ci #me{opacity:0;pointer-events:none}
body[data-desk=bench] .screen > .head:first-child,body[data-desk=bench] .screen > .top.head,body[data-desk=bench] .mdr > .head:first-child,
body[data-desk=bench] .hcols > .hc:last-child > .head,body[data-desk=bench] #home .top{padding-right:60px}
/* the rail */
body[data-desk=bench] #tabs{left:var(--gutter);right:auto;top:calc(var(--gutter) + var(--ctl) + var(--sp6));bottom:calc(var(--gutter) + 64px);width:var(--rail);height:auto;
  flex-direction:column;justify-content:center;align-items:center;gap:var(--sp3);padding:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;transform:none;touch-action:auto}
body[data-desk=bench] #tabs .sel{display:none}
body[data-desk=bench] #tabs .t{flex:none;position:relative;width:var(--ctl);height:var(--ctl);border-radius:calc(var(--ctl) / 2);gap:0;
  background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade)}
body[data-desk=bench] #tabs .t span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body[data-desk=bench] #tabs .t.on{background:var(--knob);box-shadow:var(--kshadow)}
body[data-desk=bench] #dn{left:calc(var(--gutter) + (var(--rail) - var(--ctl)) / 2);top:var(--gutter)}
@media (min-width:1440px){
  /* the rail with its words: the circles keep one left edge with the night button and right now */
  body[data-desk=bench] #tabs{align-items:stretch}
  body[data-desk=bench] #tabs .t{width:100%;flex-direction:row;justify-content:flex-start;gap:16px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border-radius:0;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--tr-label)}
  body[data-desk=bench] #tabs .t:before{content:"";width:var(--ctl);height:var(--ctl);border-radius:calc(var(--ctl) / 2);flex:none;background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
    box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade);transition:background .2s,box-shadow .2s}
  body[data-desk=bench] #tabs .t i{position:absolute;left:calc(var(--ctl) / 2 - 12px);top:calc(50% - 12px)}
  body[data-desk=bench] #tabs .t span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  body[data-desk=bench] #tabs .t.on{background:none;box-shadow:none}
  body[data-desk=bench] #tabs .t.on:before{background:var(--knob);box-shadow:var(--kshadow)}
  body[data-desk=bench] #tabs .t:not(.on) span{color:var(--soft)}
  body[data-desk=bench] #dn{left:var(--gutter)}
}
/* the line under bud: home's own foot, shown on the stage */
body[data-desk=bench] #stfoot{display:flex;flex-direction:column;position:fixed;z-index:8;bottom:var(--gutter);left:calc(var(--gutter) * 2 + var(--rail));
  width:calc(100vw - var(--gutter) * 4 - var(--rail) - var(--panel));padding:0 var(--sp5);transition:opacity .35s}
body[data-desk=bench] #stfoot > *{width:min(100%,460px);align-self:center}
body[data-desk=bench].ci #stfoot{opacity:0;pointer-events:none}
#stfoot .murmur{max-width:none}
/* home in the panel: the day on top, then the last day and the newest buds */
body[data-desk] #home .pane.today{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;border-radius:0}
body[data-desk=bench] #home .foot,body[data-desk=bench] #home .spacer,body[data-desk=deck] #home .spacer{display:none}
body[data-desk=bench] #home .top{justify-content:flex-start;min-height:46px;align-items:center}
body[data-desk=bench] #home .tdate .t1:first-child{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--tr-title)}
body[data-desk=bench] #home .pane + .pane{margin-top:var(--sp5)}
body[data-desk=bench] #home > .pane.desk-only{border-radius:24px;padding:18px 20px;background:var(--glass-2);box-shadow:inset 0 0 0 1px var(--hair)}
body[data-desk=bench] #home > .pane.today + .pane{margin-top:var(--sp5)}
body[data-desk=bench] #home .strip{grid-template-columns:repeat(5,minmax(0,1fr))}
body[data-desk=bench] #home .aside{margin-top:var(--sp5)}
@media (min-width:1440px){ body[data-desk=bench] #herbarium .herb{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* the porthole: a round window of glass; bud lives in it, clipped to it (js/desk.js) */
#port{position:fixed;z-index:11;border-radius:50%;display:block;padding:0;transition:opacity .35s}
body[data-desk] #port:not([hidden]){display:block}
#port .data{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:center;opacity:0;transition:opacity .2s}
#port:hover .data,#port:focus-visible .data{opacity:1}
body[data-desk=bench] #bud{transition:opacity .6s ease,clip-path .5s var(--ease)}
/* the toast and the way back to a check-in sit at the foot of the content */
body[data-desk=bench] #toast{top:auto;bottom:calc(var(--gutter) + var(--sp5));left:calc(100vw - var(--gutter) - var(--panel) / 2);transform:translate(-50%,calc(100% + 80px))}
body[data-desk=bench][data-open] #toast{left:calc((var(--gutter) * 2 + var(--rail) + 100vw - var(--gutter)) / 2)}
body[data-desk=bench].ci #toast{left:calc(100vw - var(--gutter) - var(--panel-ci) / 2)}
body[data-desk] #toast.on{transform:translate(-50%,0)}
body[data-desk=bench] #resume{left:calc(var(--gutter) * 2 + var(--rail) + (100vw - var(--gutter) * 4 - var(--rail) - var(--panel)) / 2);bottom:var(--gutter)}

/* ---------------------------------------------------------------- side by side (bench and deck): the list keeps its place */
body[data-desk] .screen[data-mdk]{overflow:hidden}
body[data-desk] .screen[data-mdk] > .md{display:grid;grid-template-columns:var(--list) minmax(0,1fr);gap:var(--sp6);height:100%}
.md > .mdl,.md > .mdr{overflow-y:auto;min-height:0;padding:2px 2px var(--sp6);overscroll-behavior:contain;scrollbar-width:thin}
.md > .mdr > *{max-width:var(--read)}
.md > .mdl .herb{grid-template-columns:repeat(2,minmax(0,1fr))}
.md .mdl [data-spec].on,.md .mdl [data-popen].on,.md .mdl [data-letter].on{box-shadow:inset 0 0 0 1.5px var(--ink)}
/* learn: the index in the list's place; the story (the engine's own sheet) beside it, placed by js/desk.js */
body[data-desk][data-open][data-tab=learn] #learn > *{max-width:var(--list)}
.dkstory{right:auto !important;bottom:auto !important;border-radius:24px !important;overflow-y:auto !important;box-shadow:inset 0 0 0 1px var(--hair),var(--shade) !important}
#guess.dkstory{position:fixed}
/* help: three columns from 1200, two from 1024 */
body[data-desk] #help:has(> .hcols){overflow:hidden}
.hcols{display:grid;gap:var(--sp6);height:100%}
.hcols.h3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hcols.h2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hcols > .hc{overflow-y:auto;min-height:0;padding:2px 2px var(--sp6);overscroll-behavior:contain;scrollbar-width:thin}
.hcols .hc .head{margin-bottom:var(--sp4)}
.hcols .hc > .shelf + .shelf,.hcols .hc > .therapy + .therapy{margin-top:var(--sp4)}
.mdl .hc1 .head,.hcols .hc1 .head{min-height:0}
/* you: the pass on the left, the settings in two columns on the right */
body[data-desk=bench] #you,body[data-desk=deck] #you{display:grid;grid-template-columns:minmax(300px,360px) repeat(2,minmax(0,1fr));gap:var(--sp5) var(--sp6);align-content:start;align-items:start}
body[data-desk] #you > .head{grid-column:1 / -1;margin-bottom:0}
body[data-desk] #you > .pass{grid-column:1;grid-row:2 / span 3;margin:0}
body[data-desk] #you > .sescard{grid-column:1}
body[data-desk] #you > .pane{margin:0 !important}
body[data-desk] #you > .pane:last-child{grid-column:2 / -1}

/* ---------------------------------------------------------------- THE DESK: the check-in, all at once (bench: the panel grows to --panel-ci) */
body[data-desk=bench] #sheet{left:calc(100vw - var(--gutter) - var(--panel-ci));right:auto;width:var(--panel-ci);top:auto;bottom:var(--gutter);max-height:calc(100% - var(--gutter) * 2);
  overflow-y:auto;border-radius:var(--r-win);padding:var(--pad);transform:translateX(calc(100% + 80px))}
body[data-desk] #sheet.open{transform:none}
/* the all-at-once desk fills the window's height; one of the three steps is only as tall as it is */
/* ROUND 18 · THE CHECK-IN IS A PANEL LIKE EVERY OTHER PANEL. His words: "the check in in desktop
   is weird now because theres a large empty space up top." It was anchored to the bottom, so a
   short step left a third of the column empty above it. It now runs the full height of the column,
   top gutter to bottom gutter, with the question at the top and the nav at the foot — the same
   edges as the herbarium, learn, buddies and help beside it. */
body[data-desk] #sheet{top:var(--gutter);bottom:var(--gutter);max-height:none;display:flex;flex-direction:column}
body[data-desk] #sheet > *{flex:none}
/* the action sits at the foot of the column, where it does on the phone — the sliders keep the
   top, and the card has a top edge and a bottom edge like every other panel beside it */
body[data-desk] #sheet .nav,body[data-desk] #sheet .dkgo,body[data-desk] #sheet .dkrow{margin-top:auto}
body[data-desk] #sheet .dkgrid{align-content:start}
/* ROUND 18 · YOU on a wide screen. The pass was a narrow card adrift in a wide column with a
   stray line of small type beside it. It now takes the column's own width, and the line that
   belongs under it is under it. */
/* the two halves want different columns, and the page already says which it is showing */
body[data-desk] #you:has(> .pass){grid-template-columns:minmax(320px,440px) minmax(0,1fr)}
body[data-desk] #you:has(> .pass) > .aside{grid-column:1;margin-top:0;max-width:44ch}
body[data-desk] #you:has(> .yset){display:block}
body[data-desk] #you > .yset{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:var(--sp5);align-items:start;margin-top:var(--sp5)}
body[data-desk] #you > .yset + .pane{margin-top:var(--sp5) !important}
body[data-desk] #sheet .bs{margin-top:var(--sp5)}
body[data-desk] #sheet[data-step=desk][data-dstep=all]{top:var(--gutter)}
#sheet[data-step=desk] .dkhd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp4);margin-bottom:var(--sp5)}
#sheet[data-step=desk] .dkhd .t1{font-weight:400;margin-top:8px}
#sheet[data-step=desk] .dkgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:var(--sp4) var(--sp5)}
#sheet[data-step=desk] .dkq{margin-bottom:6px}
#sheet[data-step=desk] .bs .poles{font-size:var(--fs-data);margin-bottom:8px}
@media (max-height:979px){ #sheet[data-step=desk] .dkq{display:none} }
/* ROUND 13 · the body is the dots body now, and it does not fit a third of the panel (139 px, with a
   147 px front/back control in it). Two columns for the words and the note; the body under them, wide. */
#sheet[data-step=desk] .dkrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp5);margin-top:var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--hair)}
#sheet[data-step=desk] .dkb{grid-column:1 / -1}
#sheet[data-step=desk] .dkbody{max-width:520px;margin-left:auto;margin-right:auto}
#sheet[data-step=desk] .dkc > .data{margin:4px 0 10px}
#sheet[data-step=desk] .dkw .words{display:flex;flex-wrap:wrap;gap:6px;max-height:208px;overflow:auto;padding:2px}
#sheet[data-step=desk] .dkw .chip,#sheet[data-step=desk] .dkn .chip{height:32px;padding:0 12px;font-size:var(--fs-data)}
#sheet[data-step=desk] .dkn .about{display:flex;flex-wrap:wrap;gap:6px}
#sheet[data-step=desk] .dkbody{position:relative;height:clamp(260px,34vh,360px);margin-top:10px}
/* the body column is a third of the panel: the leader labels crowd each other there (the ink check
   catches it), so on the desk the parts are named by the line under the body — the same words. */
#sheet[data-step=desk] .dkbody .ann{display:none}
#sheet[data-step=desk] .dkn textarea{min-height:104px;font-size:var(--fs-label);margin-top:10px}
#sheet[data-step=desk] .dkn > .data:last-child{margin:8px 0 0}
#sheet[data-step=desk] .dkgo{margin-top:var(--sp5);gap:var(--sp4)}
#sheet[data-step=desk] .dkgo .cta{min-width:200px}
/* ---------- ROUND 14 · THE DESK ASKS THREE QUESTIONS IN TURN (desktop only) ----------
   One step on screen at a time, so the panel holds one question whole: the eight sliders, then the
   body, then the words and the note. The rail above the question says which of the three it is,
   with the same dots the phone uses. "desk check-in → all" puts the round-11 panel back. */
#sheet[data-step=desk] .dk3{display:flex;align-items:center;gap:10px;margin-bottom:12px}
#sheet[data-step=desk][data-dstep] .dkrow.one,#sheet[data-step=desk][data-dstep] .dkrow.two{border-top:0;padding-top:0;margin-top:var(--sp4)}
#sheet[data-step=desk] .dkrow.one{grid-template-columns:minmax(0,1fr)}
#sheet[data-step=desk] .dkrow.one .dkbody{height:clamp(300px,46vh,460px);max-width:560px}
#sheet[data-step=desk] .dkrow.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#sheet[data-step=desk] .dkrow.two .dkw .words{max-height:none}
#sheet[data-step=desk][data-dstep="1"] .dkgrid{grid-template-rows:repeat(4,auto)}
/* the body is the one step that wants the whole width even on a narrow desk */
@media (max-width:1279px){ #sheet[data-step=desk] .dkrow.two{grid-template-columns:minmax(0,1fr)} }
#sheet[data-step=desk] .dkread{max-width:var(--read)}
#sheet[data-step=desk] .ones{margin-top:var(--sp4)}
#sheet[data-step=desk] .onesrow{margin:0}
@media (max-width:1279px){
  /* a narrower desk: the body gets a slim middle column (a mouse can tap a small figure), words and note keep their width */
  #sheet[data-step=desk] .dkrow{gap:var(--sp4)}
  #sheet[data-step=desk] .dkb > .data{white-space:nowrap}
}

/* ================================================================ C · THE COLUMN
   the phone, untouched, in the middle; his herbarium as a running shelf on the left; on the right the margin:
   what the phone hides behind a tap. The margin leaves first as the window narrows, then the shelf. */
body[data-desk=column] .screen{left:var(--colx,calc(50vw - 215px));width:var(--col);right:auto}
body[data-desk=column] #tabs{left:calc(var(--colx,calc(50vw - 215px)) + 14px);width:calc(var(--col) - 28px);right:auto;bottom:calc(14px + 26px)}
body[data-desk=column] #sheet{left:calc(var(--colx,calc(50vw - 215px)) + 10px);width:calc(var(--col) - 20px);right:auto;bottom:calc(10px + 26px)}
body[data-desk=column] #home .foot{bottom:calc(98px + 26px)}
body[data-desk=column] .screen{padding-bottom:calc(112px + 26px)}
body[data-desk=column] #toast{left:calc(var(--colx,calc(50vw - 215px)) + var(--col) / 2)}
body[data-desk=column] #resume{left:calc(var(--colx,calc(50vw - 215px)) + var(--col) / 2);bottom:calc(92px + 26px)}
body[data-desk=column] #shelf:not([hidden]){display:flex;flex-direction:column;position:fixed;z-index:12;left:var(--gutter);top:var(--gutter);bottom:var(--gutter);width:var(--shelf);border-radius:var(--r-win);padding:20px 8px 8px 20px}
#shelf .shd{display:flex;justify-content:space-between;align-items:baseline;padding:0 12px 12px 0;border-bottom:1px solid var(--hair)}
#shelf .sl{overflow-y:auto;flex:1;min-height:0;padding:4px 12px 12px 0;scrollbar-width:thin}
#shelf .sm{margin:14px 0 6px}
#shelf .si{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;text-align:left;padding:4px 0;border-radius:14px}
#shelf .si .t1{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#shelf .si .thumb{border-radius:22px}
body[data-desk=column] #margin:not([hidden]){display:block;position:fixed;z-index:12;right:var(--gutter);top:var(--gutter);bottom:var(--gutter);width:var(--shelf);overflow-y:auto;padding:8px 4px;scrollbar-width:thin}
#margin .mg + .mg{margin-top:var(--sp5)}
#margin .mg > .data:first-child{margin-bottom:8px}
#margin .mgc{border-radius:24px;padding:16px 18px}
#margin .mstrip{display:flex;flex-direction:column;gap:8px}
#margin .mrow{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;gap:8px;align-items:center}
#margin .mrow .data:last-child{text-align:right}
#margin .mtrk{position:relative;height:8px;border-radius:4px;background:var(--hair)}
#margin .mtrk i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);transition:left .25s var(--ease)}
#margin .mtrk i.was{background:var(--paper);box-shadow:inset 0 0 0 1.5px var(--faint)}
#margin .mlink{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;padding:10px 0;border-top:1px solid var(--hair)}
#margin .mlink:first-of-type{border-top:0}
#margin .week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
#margin .week > *{display:flex;flex-direction:column;align-items:center;gap:4px}

/* ================================================================ B · THE DECK
   a bar on top (night · the tabs as one pill · the person circle); home is a masonry of glass tiles sized by weight.
   A tile opens in place: it grows over the canvas while the others fade; esc shrinks it back. */
body[data-desk=deck] #dn{left:var(--gutter);top:var(--gutter)}
body[data-desk=deck] #me{right:var(--gutter);top:var(--gutter)}
body[data-desk=deck] #tabs{left:50%;right:auto;bottom:auto;top:var(--gutter);transform:translateX(-50%);width:min(600px,100vw - 360px);height:var(--ctl);padding:0 4px}
body[data-desk=deck] #tabs .t{flex-direction:row;gap:8px;font-size:var(--fs-data);height:44px}
body[data-desk=deck] #tabs .t i{width:20px;height:20px}
body[data-desk=deck] #tabs .sel{top:4px;bottom:4px}
body[data-desk=deck] #pane{display:block;position:fixed;z-index:9;left:var(--gutter);right:var(--gutter);top:calc(var(--gutter) * 2 + var(--ctl));bottom:var(--gutter);border-radius:var(--r-win);
  background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade);transition:opacity .35s}
body[data-desk=deck][data-tab=home] #pane,body[data-desk=deck].ci #pane{opacity:0;pointer-events:none}
body[data-desk=deck] .screen{left:var(--gutter);right:var(--gutter);width:auto;top:calc(var(--gutter) * 2 + var(--ctl));bottom:var(--gutter);padding:var(--pad) var(--pad) var(--sp6) calc(var(--port) + 40px)}
body[data-desk=deck] #home{padding:0;overflow:hidden}
body[data-desk=deck].ci .screen{visibility:hidden;opacity:0}
body[data-desk=deck] #sheet{left:calc(var(--deck-split) + var(--gutter) / 2);right:var(--gutter);width:auto;top:calc(var(--gutter) * 2 + var(--ctl));bottom:var(--gutter);max-height:none;overflow-y:auto;
  border-radius:var(--r-win);padding:var(--pad);transform:translateX(calc(100% + 80px))}
body[data-desk=deck] #toast{top:auto;bottom:calc(var(--gutter) + var(--sp5));transform:translate(-50%,calc(100% + 80px))}
body[data-desk=column] #toast{top:auto;bottom:calc(100px + 26px);transform:translate(-50%,calc(100% + 160px))}
body[data-desk=deck] #resume{bottom:var(--gutter)}
/* the tiles */
.deckh{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:var(--sp4)}
.dtile{position:relative;border-radius:var(--r-win);padding:20px 22px;overflow:hidden;text-align:left;display:flex;flex-direction:column;min-width:0;min-height:0;
  transition:opacity .35s ease,transform .45s var(--ease),box-shadow .2s}
.dtile.budt{grid-column:1 / 6;grid-row:1 / 7;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--hair);pointer-events:none}
.dtile.budt .data{margin-top:auto;pointer-events:auto}
.dtile.today{grid-column:6 / 10;grid-row:1 / 4}
.dtile.week{grid-column:10 / 13;grid-row:1 / 3}
.dtile.now{grid-column:10 / 13;grid-row:3 / 5;background:#0B0B0E;color:#EDEDF0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:var(--shade)}
.dtile.plans{grid-column:6 / 10;grid-row:4 / 7}
.dtile.pressed{grid-column:10 / 13;grid-row:5 / 7}
.dtile.viz{display:none}
.dtile .th{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:12px}
.dtile .more{display:none}
.dtile.today .murmur{margin-top:auto}
.dtile.today .row{margin-top:16px}
.dtile .wk{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:auto}
.dtile .wk > span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.dtile .wk .thumb{max-width:100%}
.dtile.now .t3{color:#EDEDF0}
.dtile.now a{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-top:1px solid rgba(255,255,255,.14)}
.dtile.now a:first-of-type{border-top:0}
.dtile.now .num{font-family:var(--f-data);font-size:var(--fs-label)}
.dtile .pl{display:flex;flex-direction:column;gap:2px;overflow:hidden}
.dtile .pl button{display:flex;align-items:center;gap:12px;padding:5px 0;text-align:left}
.dtile .pr{display:flex;gap:6px;margin-top:auto;overflow:hidden}
/* a tile, opened in place */
.deckh.grown > .dtile:not(.big):not(.budt){opacity:0;pointer-events:none;transform:scale(.97)}
.deckh.grown > .dtile.big{grid-column:6 / 13;grid-row:1 / 7;z-index:3;overflow-y:auto}
.dtile.big .more{display:block}
.dtile.big .less{display:none}
.dtile .shut{position:absolute;top:14px;right:14px;display:none}
.dtile.big .shut{display:grid}
@media (min-width:1600px){ .dtile.viz{display:flex;grid-column:10 / 13;grid-row:5 / 7;padding:0;background:#0B0B0E} .dtile.pressed{grid-column:6 / 10;grid-row:6 / 7} .dtile.plans{grid-row:4 / 6} }

/* ================================================================ THE KEYS CARD and FIND (⌘K) */
body #keys:not([hidden]){display:block;position:fixed;z-index:2147483500;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,100vw - 48px);border-radius:var(--r-win);padding:24px 26px;background:var(--sheet)}
#keys dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 14px;margin:16px 0 18px;align-items:baseline}
#keys dd{font-weight:400}
kbd{display:inline-block;font-family:var(--f-data);font-size:var(--fs-data);letter-spacing:var(--tr-data);padding:3px 8px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--hair);background:var(--glass-2);white-space:nowrap}
body #find:not([hidden]){display:grid;position:fixed;inset:0;z-index:2147483500;place-items:start center;padding-top:14vh;background:color-mix(in srgb,var(--paper) 40%,transparent)}
#find .fbox{width:min(600px,100vw - 48px);border-radius:var(--r-win);padding:8px;background:var(--sheet)}
#find .frow{display:flex;align-items:center;gap:12px;height:56px;padding:0 14px}
#find .frow .ic{width:20px;height:20px;opacity:.6}
#find input{flex:1;min-width:0;border:0;background:none;font-size:var(--fs-body);letter-spacing:var(--tr-body);outline:none}
#find .fres{max-height:52vh;overflow-y:auto;border-top:1px solid var(--hair);padding:6px 0}
#find .fr{display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;width:100%;text-align:left;padding:10px 14px;border-radius:16px}
#find .fr > .data:first-child{grid-row:1 / 3;padding-top:3px}
/* round 15 · the row under the cursor is chosen like everything else is chosen (see "THE ONE RULE"
   in css/app.css): the one token pair, and the quiet second line turns light with it. */
#find .fr[aria-selected=true]{background:var(--pick);color:var(--pick-ink);box-shadow:none}
#find .fr[aria-selected=true] .soft{color:color-mix(in srgb,var(--pick-ink) 62%,transparent)}
#find .fnone{padding:16px 14px}
#find .fnote{padding:10px 14px 8px}

/* the deck's tiles, inside */
.dtile .tt{text-align:left}
.dtile.now .tt{color:#EDEDF0}
.wdot{display:block;width:8px;height:8px;border-radius:4px;background:var(--hair);margin:16px 0}
#margin .wdot{margin:11px 0}
.dtile .wrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:10px 0;border-top:1px solid var(--hair)}
.dtile .wrow:first-child{border-top:0}
.dtile .wrow .you{grid-column:2}
.dtile .wrow button{text-align:left}
.dtile.big .pl.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px}
.dtile .pl button{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center}
.dtile .pl button .thumb{grid-row:1 / 3}
.dtile .pl button .data{grid-column:2}
.dtile .pl .gbtn{display:inline-flex;justify-self:start;margin-top:8px}
.dtile.big .herb{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:4px}
.dtile.today .t1.soft:first-child{display:none}
.dtile.today > .row{margin-top:auto}
.dtile.today .murmur{margin:auto 0 0;max-width:none}
.dtile.today .one1 + .murmur{margin-top:12px}
.dtile.viz > *{width:100% !important}
.dkcol{border-radius:0 !important}

/* ---------------------------------------------------------------- round 11 fixes after the first shots */
body[data-desk] #home .tdate{text-align:left}
body[data-desk] .md > .mdl,body[data-desk] .md > .mdr,.hcols > .hc{overflow-x:clip}
.md .mdl [data-spec].on,.md .mdl [data-letter].on{box-shadow:inset 0 0 0 1.5px var(--ink)}
.md .mdl .pcard.on{background:var(--knob);box-shadow:var(--kshadow)}
body[data-desk] .hc1 .pcard .pb .thumb,body[data-desk] .mdl .pcard .pb .thumb{width:64px !important;height:64px !important}
body[data-desk] .hc1 .pcard,body[data-desk] .mdl .pcard{padding:10px 16px 10px 10px;gap:14px}
body[data-desk] .hc1 .pcard .t3,body[data-desk] .mdl .pcard .t3{font-size:var(--fs-lead)}
body[data-desk][data-tab=you] #me{background:var(--knob);box-shadow:var(--kshadow)}
body[data-desk=bench][data-tab=you] #tabs .t.on{background:var(--glass);box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade)}
@media (min-width:1440px){ body[data-desk=bench][data-tab=you] #tabs .t.on{background:none;box-shadow:none} body[data-desk=bench][data-tab=you] #tabs .t.on:before{background:var(--glass);box-shadow:inset 0 0 0 1px var(--rim),0 0 0 .5px var(--edge),var(--shade)} body[data-desk=bench][data-tab=you] #tabs .t.on span{color:var(--soft)} }
body[data-desk] #you > .top.head > .t1.soft{display:none}
/* the desk's tracks: a quiet groove under the white fill (the panel is glass already, so no second blur) */
#sheet[data-step=desk] .bs .tr{background:color-mix(in srgb,var(--ink) 6%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 0 0 1px var(--hair)}
#sheet[data-step=desk] .bs .fill{opacity:.9}
/* "press it" stays in reach while the desk scrolls */
#sheet[data-step=desk] .dkgo{position:sticky;bottom:calc(var(--pad) * -1);margin:var(--sp5) calc(var(--pad) * -1) calc(var(--pad) * -1);padding:var(--sp4) var(--pad) var(--pad);
  background:linear-gradient(to bottom,transparent,var(--sheet) 28%);z-index:2}
#sheet[data-step=desk] .dkbody{height:clamp(230px,30vh,300px)}
#sheet[data-step=desk] .dkn textarea{min-height:84px}
#sheet[data-step=desk] .dkgrid{gap:12px var(--sp5)}
#sheet[data-step=desk] .dkhd{margin-bottom:var(--sp4)}

.dtile:not(.big) .more{display:none !important}
#margin .num,.dtile .num{font-family:var(--f-data);font-size:var(--fs-data);white-space:nowrap;font-variant-numeric:tabular-nums}
#margin .link{display:inline-flex;align-items:center;gap:6px}
#margin .link .ic{width:16px;height:16px}
/* the deck's check-in: the bar steps aside (as the phone's pill does), so the desk has the whole height of the right half */
body[data-desk=deck] #sheet[data-step=desk]{top:var(--gutter)}
body[data-desk=deck].ci #tabs,body[data-desk=deck].ci #me{opacity:0;pointer-events:none;transition:opacity .3s}
#sheet[data-step=desk] .dkgo{background:linear-gradient(to bottom,transparent,color-mix(in srgb,var(--paper) 94%,transparent) 30%)}

/* below 1440 the grown panel has no room for a porthole column: the porthole sits top left and the first column starts under it */
@media (max-width:1439px){
  body[data-desk=bench][data-open]:not([data-tab=you]) .screen{padding-left:var(--pad)}
  body[data-desk=bench][data-open] .md > .mdl,body[data-desk=bench][data-open] .hcols > .hc1{padding-top:calc(var(--port) + var(--sp3))}
  body[data-desk=bench][data-open][data-tab=learn] #learn > .head{margin-top:calc(var(--port) + var(--sp3))}
  body[data-desk=bench] #you{grid-template-columns:minmax(280px,330px) minmax(0,1fr)}
  body[data-desk] #you > .pane:last-child{grid-column:2}
}
body[data-desk] #herbarium .md{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
.hcols .therapy .prow .pt{flex-direction:column;align-items:flex-start;gap:2px}
/* the desk on a shorter window: smaller tracks (the knob stays round), tighter rows, so "press it" is in view without scrolling */
@media (max-height:919px){
  #sheet[data-step=desk] .bs .tr{height:46px;border-radius:23px}
  #sheet[data-step=desk] .bs .fill{border-radius:18px}
  #sheet[data-step=desk] .bs .knob{width:36px;margin-left:-36px;border-radius:18px}
  #sheet[data-step=desk] .bs .knob i{width:19px;height:19px}
  #sheet[data-step=desk] .bs .poles{margin-bottom:6px}
  #sheet[data-step=desk] .dkhd .t1{display:none}
  #sheet[data-step=desk] .dkhd{margin-bottom:var(--sp3)}
  #sheet[data-step=desk] .dkgrid{gap:10px var(--sp5)}
  #sheet[data-step=desk] .dkrow{margin-top:var(--sp4);padding-top:var(--sp4)}
  #sheet[data-step=desk] .dkw .words{max-height:150px}
  #sheet[data-step=desk] .dkbody{height:clamp(200px,26vh,260px)}
  #sheet[data-step=desk] .dkn textarea{min-height:64px}
  #sheet[data-step=desk] .dkgo{margin-top:var(--sp4)}
}
#sheet[data-step=desk] .dkgo{background:color-mix(in srgb,var(--paper) 96%,transparent)}

body[data-desk] .weekp .week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
body[data-desk] .weekp .week > *{display:flex;flex-direction:column;align-items:center;gap:6px}
body[data-desk] .weekp .wdot{margin:15px 0}

@media (prefers-reduced-motion:reduce){ #pane,body[data-desk] .screen,#bud,.dtile,#tip{transition:none !important} }