/* lucille.lol/commands. Tokens live in site.css. */
.starts{margin-top:clamp(56px,6vw,88px)}
.starts h2{font-size:var(--s-head);line-height:1}
.start-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:40px}
.start{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;border:0;cursor:pointer;color:var(--on-accent);
  background:var(--pink);padding:clamp(24px,3vw,40px);font:inherit;transition:transform .2s var(--ease)}
.start.c-rose{background:var(--rose)}.start.c-peach{background:var(--peach)}
.start img{width:min(200px,60%);height:auto;margin-bottom:12px;transition:transform .35s var(--ease)}
.start:hover img{transform:rotate(-4deg) scale(1.04)}
.start:active{transform:scale(.98)}
.start .name{font:600 var(--s-state)/1.1 var(--display)}
.start .desc{font-size:var(--s-body);max-width:30ch}
.finder{margin-top:clamp(56px,6vw,88px)}
.search{display:flex;align-items:center;gap:14px;background:var(--tone-2);border-radius:var(--radius);height:64px;padding:0 24px;max-width:760px}
.search:focus-within{outline:3px solid var(--peach);outline-offset:3px}
.search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:500 20px var(--display)}
.search input::placeholder{color:var(--muted);opacity:.85}
.search input::-webkit-search-cancel-button{filter:invert(1)}
.search kbd{font:700 15px var(--text);color:var(--muted);background:var(--tone);padding:5px 10px;border-radius:var(--radius)}
.groups{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.groups button{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:0;border-radius:var(--radius);
  background:var(--tone);color:var(--ink);font:600 15px var(--display);cursor:pointer;transition:background .15s,transform .15s}
.groups button .e{width:22px;height:22px;vertical-align:0}
.groups button:hover{background:var(--tone-2)}
.groups button:active{transform:scale(.96)}
.groups button[aria-pressed="true"]{background:var(--rose);color:var(--on-accent)}
.count{margin-top:10px;min-height:1.5em;font-size:var(--s-small);color:var(--muted)}

.list{display:flex;flex-direction:column;gap:clamp(72px,8vw,120px);margin-top:clamp(72px,8vw,120px)}
.group{scroll-margin-top:24px}
.group-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.group-head img{width:56px;height:56px}
.group-head h2{font-size:var(--s-head);line-height:1}
.group-head .n{margin-left:auto;font-size:var(--s-small);color:var(--muted);font-variant-numeric:tabular-nums}
.cmds{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:4px}
.cmd{width:100%;text-align:left;display:flex;flex-direction:column;gap:4px;padding:16px 20px;background:none;border:0;border-radius:20px;
  color:var(--ink);font:inherit;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}
.cmd:hover{background:var(--tone)}
.cmd:active{transform:scale(.985)}
.cmd .name{font:600 20px/1.25 var(--display);color:var(--pink);overflow-wrap:anywhere}
.cmd .sig{color:var(--muted);font:500 15px var(--display)}
.cmd .desc{font-size:16px;line-height:1.5;color:var(--ink)}
.cmd .aka{font-size:15px;color:var(--muted)}
.cmd.pop{animation:pop .4s var(--ease)}
@keyframes pop{40%{background:var(--tone-2);transform:scale(.98)}}
.empty-note{font-size:var(--s-body);color:var(--muted)}

.none{display:flex;align-items:center;gap:40px;margin-top:24px;background:var(--tone);padding:clamp(24px,4vw,56px)}
.none img{width:min(200px,36vw);height:auto}
.none h2{font-size:var(--s-state);line-height:1.15}
.none p{margin:14px 0 24px;max-width:44ch}
.none a{color:var(--pink)}

@media (max-width:900px){
  .cmds{grid-template-columns:1fr}
  .cmd{padding:14px 12px}
  .group-head img{width:44px;height:44px}
  .search{height:56px;padding:0 18px}
  .search input{font-size:18px}
  .none{flex-direction:column;align-items:flex-start;gap:20px}
  .start-row{grid-template-columns:1fr}
  .start{flex-direction:row;align-items:center;flex-wrap:wrap}
  .start img{width:96px;margin:0}
  .start .name{flex:1;font-size:20px}
  .start .desc{flex-basis:100%}
}
@media (max-width:640px){.hide-sm{display:none}}

.to-search{position:fixed;right:max(var(--margin),env(safe-area-inset-right,0px));bottom:24px;z-index:10;width:60px;height:60px;border-radius:50%;border:0;
  background:var(--rose);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;
  box-shadow:0 10px 28px rgba(0,0,0,.4);transition:opacity .2s var(--ease),transform .25s var(--ease),background .15s} /* taste-skill-ignore: floating button, it truly floats over the list */
.to-search img{width:30px;height:30px}
.to-search.show{opacity:1;transform:none;pointer-events:auto}
.to-search:hover{background:var(--pink)}
.to-search:active{transform:scale(.94)}