/* ---------- the resting state ----------
   No graph behind it. The search box is physically moved in here, so it is the
   same element and the same handlers as the one in the corner.

   Always in the layout, hidden by opacity rather than `display:none`, so
   returning here from a concept -- closing a node, or Escape -- fades rather
   than snaps. `display` cannot be transitioned; this is the standard way
   around that. Being present but invisible is harmless: pointer-events:none
   on the container means it cannot be clicked or tabbed into while hidden,
   whatever is layered above it. */
/* The container itself never takes pointer events, in either state. It is a
   full-screen box at z-index 40, so the moment it does, it covers the menu
   button (z-index 31) and the click lands on empty overlay instead -- which is
   exactly why the menu did nothing on the landing screen. Only the card's own
   children are clickable, and only while home is showing. */
#home{position:fixed;inset:0;z-index:40;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:0;
  padding:0 24px;opacity:0;pointer-events:none;
  transition:opacity .5s ease}
body.home #home{opacity:1}
#home>*{pointer-events:none}
body.home #home>*{pointer-events:auto}

#homeTitle{font-family:'Fraunces',Georgia,serif;font-weight:340;
  font-size:clamp(38px,5.4vw,64px);letter-spacing:-.01em;color:var(--tx);
  line-height:1;margin-bottom:14px}
#homeSub{font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;color:var(--tx-3);margin-bottom:38px}

/* The search box lands here. Sized from this side so the corner version stays
   small -- #find carries no width of its own once it is in home. */
#homeSlot{width:min(620px,86vw)}
body.home #find{width:100%}
body.home #findq{height:62px;font-size:19px;padding:0 26px;border-radius:999px}
body.home #findlist{margin-top:10px;max-height:min(46vh,420px);overflow-y:auto}
body.home .fr{padding:12px 18px}
body.home .fr .ft{font-size:15px}

/* ---------- resume ----------
   Closing a concept puts you back on the search, which is right, but it also
   throws away the one thing you were certainly interested in. This offers it
   back. Only on the landing screen, and only when there is somewhere to go. */
#resume{position:fixed;bottom:26px;right:28px;z-index:41;
  display:none;align-items:center;gap:9px;max-width:min(360px,44vw);
  padding:10px 16px 10px 14px;border-radius:999px;cursor:pointer;
  font-size:13.5px;color:var(--tx-2);
  border:.5px solid var(--panel-line);background:var(--panel-bg);
  background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  box-shadow:var(--panel-shadow);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s cubic-bezier(.32,.72,0,1),
             background .25s,color .25s}
body.home #resume.has{display:flex;opacity:1;transform:none}
#resume:hover{background:var(--hover);color:var(--tx)}
#resume .rlbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#resume .rarrow{flex:0 0 auto;font-size:15px;color:var(--tx-3);line-height:1}

#homeHint{margin-top:30px;font-size:13.5px;color:var(--tx-3)}
#viewAll{margin-top:12px;cursor:pointer;font-size:14px;font-weight:500;
  color:var(--tx-2);padding:11px 24px;border-radius:999px;
  border:.5px solid var(--panel-line);background:var(--panel-bg);
  background-image:var(--panel-img);
  -webkit-backdrop-filter:var(--panel-blur);backdrop-filter:var(--panel-blur);
  box-shadow:var(--panel-shadow);
  transition:background .25s,color .25s,transform .25s cubic-bezier(.32,.72,0,1)}
#viewAll:hover{background:var(--hover);color:var(--tx);transform:translateY(-1px)}

/* Chrome that only makes sense with a graph on screen */
body.home #hops,body.home #hint{opacity:0;pointer-events:none}
#hops,#hint{transition:opacity .5s ease}

/* ---------- hop toggle ---------- */
/* Sat at 96px to clear the legend; the legend is gone, so it comes down to
   match #hint on the other side. */
#hops{position:fixed;bottom:26px;left:28px;z-index:10;display:flex;gap:3px;
  padding:3px;border-radius:999px;border:.5px solid var(--chip-line);
  background:var(--chip);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
#hops .hop{font-size:11.5px;font-weight:500;letter-spacing:.02em;
  padding:6px 13px;border-radius:999px;cursor:pointer;color:var(--tx-3);
  transition:background .22s,color .22s}
#hops .hop:hover{color:var(--tx-2)}
#hops .hop.on{background:var(--accent);color:#fff}